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:

 {{ form()}} 
  
 
 
{{ number_format(status1, 0, '', ',') }}
 
აქტიური
 
 
  
 
 {{ submit_button("Forward", "name": "1", "class": "btn btn-primary-outline text-white text-sm", 'value':'დაწვრილებით') }} {{form.render('id',['value':1])}}  
 
 
 {{ form.render('csrf', ['value': security.getToken()]) }} {{ end_form() }}  {{ form()}} 
  
 
 
{{ number_format(status0, 0, '', ',') }}
 
პასიური
 
 
  
 
 {{ submit_button("Forward", "name": "1", "class": "btn btn-primary-outline text-white text-sm", 'value':'დაწვრილებით') }} {{form.render('id',['value':0])}}  
 
 
 {{ form.render('csrf', ['value': security.getToken()]) }} {{ end_form() }} 

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! !