Demo
For the best viewing experience, click the Edit on CodePen button on the upper righthand corner of the Pen to open it in a new tab.
Summary
<div class="container">
<div class="row">
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
</div>
</div>
Details
As you can see in the code sample above, by simply using the col
class on multiple divs inside of a row div, you can set up several equal width columns. Note that the divs with the plain col
class will not collapse into a single column on a smaller screen or window size.
Exercises
Recreate the HTML code from the Demo section in your index.html file.
Try adding or removing more divs with a col
class to the row div. Also, try resizing the window. Notice how the columns shrink in size but stay in one row.