title: How to create 3 columns for cards using bootstrap row class
body: <p>I'm trying to display the content (which are presented in cards) of my page in three different columns using bootstrap 4 row class. How do I go about it? </p>
  
  <p>I'm using Laravel 5.8 and bootstrap 4. Other bootstrap functions like carousel and nav bar are working properly.</p>
  
  <p>The code for the content in the main blade file-views/layout/app.blade.php looks like this;</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
       @yield('content')                   
  &lt;/div&gt;
  </code></pre>
  
  <p>Then that for the page I desire the layout-views/pages/secondpage.blade.php is;</p>
  
  <pre><code>@extends('layout.app')
  
  @section('content')
  
          &lt;div class="col-12 text-center"&gt;
              &lt;h2&gt; Page caption&lt;/h2&gt;
          &lt;/div&gt;
  
  &lt;div class="row"&gt;
  
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="card border-white"&gt;
                  &lt;div class="card-header"&gt;Heading 1&lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;p class="card-text"&gt;Some quick example text to build 
                             on the card 
                          title and make up the bulk of the card's content.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="card border-white"&gt;
                  &lt;div class="card-header"&gt;Heading 2&lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;p class="card-text"&gt;Some quick example text to build 
                            on the card 
                          title and make up the bulk of the card's content.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="card border-white"&gt;
                  &lt;div class="card-header"&gt;Heading 3&lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;p class="card-text"&gt;Some quick example text to build 
                           on the card 
                          title and make up the bulk of the card's content.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;/div&gt;
  
  @endsection
  </code></pre>
  
  <p>I expect to see the cards arranged in three different columns, but they are all in a single column.</p>