title: bootstrap 4 layout in angular 7
body: <p>I'm trying to create a template with bootstrap grid system like the image below from medium screen sizes but unable to do so. Below is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="container-fluid" style="text-align:center"&gt;
      &lt;div class="row" style="text-align:center"&gt;
        &lt;div class="col-md-12" style="font-size:22px"&gt;All Blogs &lt;/div&gt;
        &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;div class="row col-md-12 py-3" *ngIf="allBlogs.length&gt;0"&gt;
       &lt;!--  Card Start --&gt;
        &lt;div class="card" *ngFor="let blog of allBlogs"&gt;
          &lt;div class="row"&gt;
                &lt;div class="col-md-3"&gt;
                  &lt;a [routerLink]="['/blog', blog.id]"&gt;&lt;img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"&gt;&lt;/a&gt;
                 &lt;/div&gt;
            &lt;div class="col-md-5 px-3"&gt;
              &lt;div class="card-block px-6"&gt;
                &lt;h4 class="card-title"&gt;{{blog.title}}&lt;/h4&gt;
                &lt;p class="card-text"&gt;{{blog.description}}&lt;/p&gt;
                &lt;br&gt;
                &lt;a href="#" class="mt-auto btn btn-primary"&gt;Read More&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;br&gt;
        &lt;app-blog-category&gt;&lt;/app-blog-category&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/O5oPw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O5oPw.png" alt=""></a></p>