3 column layout – 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

<!-- 3 columns -->
<div class="container">
  <h2 class="text-center">Heading</h2>
  <div class="row">
    <div class="col-md">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, ipsa animi molestiae fuga nemo quae asperiores aspernatur rem accusantium? Totam, repellendus? Ipsum repudiandae eaque vitae rem harum, ipsam nesciunt neque?</p>
    </div>

    <div class="col-md">
       <h2>Lorem ipsum dolor sit amet</h2>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, ipsa animi molestiae fuga nemo quae asperiores aspernatur rem accusantium? Totam, repellendus? Ipsum repudiandae eaque vitae rem harum, ipsam nesciunt neque?</p>
    </div>

    <div class="col-md">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, ipsa animi molestiae fuga nemo quae asperiores aspernatur rem accusantium? Totam, repellendus? Ipsum repudiandae eaque vitae rem harum, ipsam nesciunt neque?</p>
    </div>

  </div>
</div>

Details

To create a 3-column layout, start with a container div and then nest a row div inside of it. Then put three column divs inside of the row div. In our case, we chose to apply the col-md class to the column divs, but you can choose a different breakpoint (like col-lg, for example).

In the demo section below, we placed heading and paragraph elements in each column, but you can use other elements depending on what you’re trying to do.

Exercises

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

Try resizing the window to test out the breakpoint.

Back to: Bootstrap Reference > Bootstrap Layouts