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.