Grid – 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">    
   <!-- Grid -->
   <h2>Heading</h2>
   <div class="row row-cols-1 row-cols-lg-3">  
     <div class="col">
       <h3>Lorem ipsum dolor sit amet</h3>
       <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">
       <h3>Lorem ipsum dolor sit amet</h3>
       <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">
       <h3>Lorem ipsum dolor sit amet</h3>
       <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">
       <h3>Lorem ipsum dolor sit amet</h3>
       <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">
       <h3>Lorem ipsum dolor sit amet</h3>
       <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">
       <h3>Lorem ipsum dolor sit amet</h3>
       <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 grid layout in Bootstrap, start with a container div and then nest a row div inside of it.

<div class="container">    
   <!-- Grid -->
   <h2>Heading</h2>
   <div class="row">  
   </div>
 </div>

You will also want to add one or more of the row column classes to the div. The row column classes have the following format: row-cols-*. The * can be replaced with the numbers 1 through 6. The number determines how many items are in each row. If you want the layout to be responsive, you can add a breakpoint before the number, like this: row-cols-md-*.

<div class="container">    
   <!-- Grid -->
   <h2>Heading</h2>
   <div class="row row-cols-1 row-cols-lg-3">  
   </div>
 </div>

In our example, we’re using the row-cols-1 class first and then the row-cols-lg-3 class. Using the row-cols-1 class first ensures that the layout changes to a 1-column layout on smaller screens. The row-cols-lg-3 class means there will be 3 items in each row.

Next, put multiple column divs inside of the row div. When using the row-cols-* classes, you should just use the col class on your columns. In our case, we chose to add 6 column divs with the col class.

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