Hello All,
I am in dire need of help in utilizing this project example. I was tasked in utilizing it but they want two rows of cards. Three on top and a second row of three. I have tried to figure out what I am doing wrong with the divs to make that happen. Can anyone here have a kind soul and show me how to accomplish this?
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.
Thank you! You explained that so well!
So I do have this all in place now thanks to your guidance! But, the one problem I am coming up with now is getting the cards to align side by side. They are collapsing vertically on top of each other. How do I fix this issue?
Please post a screenshot along with your raw code. Thanks.
I checked your code. The problem why it is not showing correctly is because the code is VERY dirty. Tags aren’t closed correctly.
Try cleaning it up. You can’t just copy paste code without checking if the format is completely correct.
Took me about an hour to clean it up and it works great.
One thing that is not quite right tho.
For your columns you are using this class <div class="col-sm">.
When you don’t give it a number bootstrap will automatically think it is 12. This means it try’s to fill the whole row. which makes it look like they are underneath each other.
Try giving that class a number of how wide you want the column to be. Make sure all columns in a row add up to 12 else they will show underneath each other.
example: <div class="col-sm-4">
But first clean up the code. Take a look at this if your not sure what clean code looks like.
end result for me:
Thank you biirra. Honestly, it’s all semi-new to me. I know enough to format paragraphs, tables, lists and unordered lists. I am a copy editor, so I don’t normally do any of this but since our web content manager is out due to a car accident, the project landed in my lap. They feel that just because I know some basic things, I must know it all which is clearly not the case. This has been a whole new learning experience. Thank you for all your help and guidance, it is genuinely appreciated.
No problem glad to help.
Welkom to the world of programming 
I have an important question about the numbers in col-sm-.. What is the value of these numbers? Os it for the width of the column ir something else?
There are a maximum of 12 columns. The numbers in the selector are how many twelfths in each column. If it is col-sm-4 then there are three columns.
