Bootstrap works allot like a table.
first a table example in html:
<table> <!-- the table -->
<tr> <!-- the table row -->
<td> <!-- the table data/column -->
</td>
</tr>
</table>
In bootstrap we have something very simular but we use classes to get the desired design, this way we still have the functionality of a <div>
.
Bootstrap example of a table:
<div class="container"> <!-- the table -->
<div class="row"> <!-- the table row -->
<div class="col-12"> <!-- the table data/column -->
</div>
</div>
</div>
It is important to understand that a row should always be 12 columns wide so you wont get unexpected results in your design. This is why in the example below i use the class col-4
x 3 cause it adds up to 12 (3*4 = 12).
More on this can be found in the documentation of bootstrap.
If you would like 2 rows with 3 columns each your code would look like this:
<div class="container"> <!-- the table -->
<div class="row"> <!-- the table row -->
<div class="col-4"> <!-- the table data/column 4 wide -->
item 1
</div>
<div class="col-4"> <!-- the table data/column 4 wide -->
item 2
</div>
<div class="col-4"> <!-- the table data/column 4 wide -->
item 3
</div>
</div>
<div class="row"> <!-- the table row -->
<div class="col-4"> <!-- the table data/column 4 wide -->
item 4
</div>
<div class="col-4"> <!-- the table data/column 4 wide -->
item 5
</div>
<div class="col-4"> <!-- the table data/column 4 wide -->
item 6
</div>
</div>
</div>
Hope this makes it a little clearer.