Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Equal width columns – Bootstrap

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.

Desktop View
Mobile View

Exercises

Recreate the HTML code from the Demo section in your index.html file.

References

Equal-width columns | Bootstrap Docs

Back to: Bootstrap Reference > Bootstrap Grid System