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.
<div class="container"> <div class="row"> <div class="col"> col </div> <div class="col"> col </div> <div class="col"> col </div> </div> </div>
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.
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.