Bootstrap 5 modal form design - how does column/row work? - html

Question

I am designing my first program with flask/python and using Bootstrap 5 for the front end. I have a modal that has at least 6 form rows, what is the best practices way to line up the form entry boxes so it looks good? Do I put it into 2 columns then put each form line in a separate row? Is it correct to assume that the modal has its own column/row numbers that do not talk to the rest of the html, or is it somehow connected? Before I write/rewrite a bunch of tags and classes maybe someone could give me a brief guide/explanation. Thank you!

Answer 1

When you create a row with bootstrap, it take the original size of your div. Then all col-x will be a sub-division of this row (width)
what is the best practices way to line up the form entry boxes so it looks good?
It entirely depends on you. If you wish to have one label plus input per line(row) then you can do something like that:
<div class="row">
<div class="col-md-6">
<label for="input1">label1</label>
</div>
<div class="col-md-6">
<input type="text" id="input1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="input2">label2</label>
</div>
<div class="col-md-6">
<input type="text" id="input2">
</div>
</div>
Or
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-12">
<label for="input1">label1</label>
</div>
</div>
<div class="row">
<div class="col-12">
<label for="input2">label2</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<input type="text" id="input1">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" id="input2">
</div>
</div>
</div>
</div>
Does the same result, but you will prefer to use the first solution
Do I put it into 2 columns then put each form line in a separate row?
This is correct
Is it correct to assume that the modal has its own column/row numbers that do not talk to the rest of the html, or is it somehow connected?
This is also correct, the row in you modal is not connected to the rest of the HTML
I guess you have already seen this page, but in case, here is the documentation: https://getbootstrap.com/docs/5.0/layout/grid/