<h1>Testing Only - Example 1 using .container class</h1>
<div class="container my-container">
  <div class="row">
    <div class="col-md-10 left-column">testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing </div>
    <div class="col-md-2 images">
      <figure><img src="http://www.pmob.co.uk/temp2/images/a3-centred.jpg" width="500" height="285" alt="test">
        <figcaption>Image 1</figcaption>
      </figure>
      <figure><img src="http://www.pmob.co.uk/temp2/images/a3-centred.jpg" width="500" height="285" alt="test">
        <figcaption>Image 2</figcaption>
      </figure>
      <figure><img src="http://www.pmob.co.uk/temp2/images/a3-centred.jpg" width="500" height="285" alt="test">
        <figcaption>Image 3</figcaption>
      </figure>
      <figure><img src="http://www.pmob.co.uk/temp2/images/a3-centred.jpg" width="500" height="285" alt="test">
        <figcaption>Image 4</figcaption>
      </figure>
    </div>
  </div>
</div>

<h1>Testing Only - Example 2 using fluid container class</h1>
<div class="container-fluid my-container">
  <div class="row">
    <div class="col-md-10 left-column">testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing </div>
    <div class="col-md-2 images">
      <figure><img src="http://www.pmob.co.uk/temp2/images/a3-centred.jpg" width="500" height="285" alt="test">
        <figcaption>Image 1</figcaption>
      </figure>
      <figure><img src="http://www.pmob.co.uk/temp2/images/a3-centred.jpg" width="500" height="285" alt="test">
        <figcaption>Image 2</figcaption>
      </figure>
      <figure><img src="http://www.pmob.co.uk/temp2/images/a3-centred.jpg" width="500" height="285" alt="test">
        <figcaption>Image 3</figcaption>
      </figure>
      <figure><img src="http://www.pmob.co.uk/temp2/images/a3-centred.jpg" width="500" height="285" alt="test">
        <figcaption>Image 4</figcaption>
      </figure>
    </div>
  </div>
</div>
h1{text-align:center;margin:2rem 0 1rem}
.my-container{background:#f9f9f9;}
.left-column{background:#ccc;box-shadow:0 0 10px 10px rgba(0,0,0,0.2);}
.images {box-shadow:0 0 10px 10px rgba(0,0,0,0.2);}
.images img {width:100%;height:auto;}
figcaption {text-align:center;marhin-bottom:1rem}
.container-fluid.my-container{max-width:1170px;
margin:auto;}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.