Equal width columns – Bootstrap

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.

Desktop View
Mobile View

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.

Exercises

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.

References

Equal-width columns | Bootstrap Docs