title: Bootstrap 4 columns not working
body: <p>I'm a student. And I have used Bootstrap 3.3.7 and after moved to v4.1. In this version, columns are not floating automatically to right. So I used <code>d-inline-block</code> class. I created 4 blocks with 3 of columns for each. The number of columns in a row is equal to 12. Then the last column jumps to the new line instead of wrap to the previous column. But this code works fine with Bootstrap 3.3.7. Also, I used 2 columns just for one block, and when the number of columns is smaller than 12, there is no problem. I couldn't find any proper solution on google. Please help. Thank you. </p>
  
  <p>Example:
  <a href="https://jsfiddle.net/EshanRajapakshe/3aeaeohb/" rel="nofollow noreferrer">https://jsfiddle.net/EshanRajapakshe/3aeaeohb/</a></p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;section class="popular-templates-section"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="col-lg-12 col-md-12"&gt;
      &lt;div class="popular-templates-title"&gt;
        &lt;h4&gt;Most Popular Templates&lt;/h4&gt;
      &lt;/div&gt;
  
      &lt;div class="popular-templates"&gt;
  
        &lt;div class="col-lg-3 col-md-3 d-inline-block"&gt;   
          &lt;div class="template-img"&gt;
            &lt;img src="assets/images/template-thumb/template-1.jpg" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;      
  
  
        &lt;div class="col-lg-3 col-md-3 d-inline-block"&gt;   
          &lt;div class="template-img"&gt;
            &lt;img src="assets/images/template-thumb/template-1.jpg" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;    
  
        &lt;div class="col-lg-3 col-md-3 d-inline-block"&gt;   
          &lt;div class="template-img"&gt;
            &lt;img src="assets/images/template-thumb/template-1.jpg" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;   
  
        &lt;div class="col-lg-3 col-md-3 d-inline-block"&gt;   
          &lt;div class="template-img"&gt;
            &lt;img src="assets/images/template-thumb/template-1.jpg" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;   
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>