HTML div element shrinks after adding form tag

Question

I added the Form tags outside the div elements but for some reason they shrink. I'm using Bootstrap and I'm guessing it's because I've set the main container div to "row" and when I switch it to "col" it no longer shrinks, but that's not the layout I want. This is my code:

<div class="row">
    {{ form()}}
    <div class="col-sm-3 col-md-3 ">
        <!-- small box -->
        <div class="small-box bg-success d-flex flex-column">
            <div class="inner">
                <h3>{{ number_format(status1, 0, '', ',') }}</h3>
                <p>აქტიური</p>
            </div>
            <div class="icon">
                <i class="ion ion-bag"></i>
            </div>
            
            <div class="align-self-center ">
                {{ submit_button("Forward", "name": "1", "class": "btn btn-primary-outline text-white text-sm", 'value':'დაწვრილებით') }}
                {{form.render('id',['value':1])}}
                <i class="fa fa-arrow-circle-right"></i>
            </div>
        </div>
    </div>
    {{ form.render('csrf', ['value': security.getToken()]) }}
    {{ end_form() }}
    <!-- ./col -->
{{ form()}}
<div class="col-sm-3 col-md-3">
        <!-- small box -->
        <div class="small-box bg-info d-flex flex-column">
            <div class="inner">
                <h3>{{ number_format(status0, 0, '', ',') }}</h3>
                <p>პასიური</p>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <div class="align-self-center">
                {{ submit_button("Forward", "name": "1", "class": "btn btn-primary-outline text-white text-sm", 'value':'დაწვრილებით') }}
                {{form.render('id',['value':0])}}
                <i class="fa fa-arrow-circle-right"></i>
            </div>
           
        </div>
</div>
{{ form.render('csrf', ['value': security.getToken()]) }}
{{ end_form() }}
<div>

This is the design:

The rows below are the desired layout, this is what happens before I add the form markup, the rows above are what happens when I add the form. What causes this? How can I solve this problem? thanks for your help! !

Answer 1

From Documentation:

You have inserted a form between the row and column, so the column is now a grandchild of the row, not a child.

Replace the div with a form instead of placing the form inside a div. Make sure to set the row class on the form.