Skip to content

Try our new Crash Courses!

Become a member using the button below to hide this banner and gain access to our new Crash Courses.

Side by side 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

<div class="container">
   <div class="row">
     <div class="col-md">
       <h2>Lorem ipsum dolor</h2>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
     </div>
     <div class="col-md">
       <h2>Lorem ipsum dolor</h2>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
     </div>
   </div>
 </div>

Details

To create a side by side layout, start with a container div and then nest a row div inside of it. Then put two 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 have text content in both of the column divs, but you can also have other content, like images in the columns. Here’s an example of using an image in one of the columns (make sure you include the img-fluid class on the img element):

<div class="container">
   <!-- Side by side -->
   <div class="row">
     <div class="col-md">
       <h2>Lorem ipsum dolor</h2>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
     </div>
     <div class="col-md">
       <img class="img-fluid" src="my-picture.jpg" alt="">
     </div>
   </div>
 </div>

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