title: Bootstrap columns are stacking, they should be aligned horizontally
body: <p>My images are in three col-4s, which should make them all fit in a row, but for some reason they stack instead. I was trying to hide the content below md display, but .d-block seems break the row layout.</p>
  
  <p><a href="https://i.stack.imgur.com/tFk3a.png" rel="nofollow noreferrer">Image of the inspection</a></p>
  
  <p>Code: </p>
  
  <pre><code>    &lt;div class="row d-none d-md-block"&gt;
  
          &lt;div class="col-4"&gt;
              &lt;img class="img-fluid" src="images/website images/userResearch1.jpg" alt="User Research Qualitative Notes"/&gt;
          &lt;/div&gt;
  
          &lt;div class="col-4"&gt;
              &lt;img class="img-fluid" src="images/website images/userResearch2.jpg" alt="User Research Qualitative Notes"/&gt;
          &lt;/div&gt;
  
          &lt;div class="col-4"&gt;
              &lt;img class="img-fluid" src="images/website images/userResearch3.jpg" alt="User Research Qualitative Notes"/&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  </code></pre>