title: Content from two columns doesn't show as expected Django and Bootstrap 4
body: <p>I'm currently building a blog+portfolio with Django and Bootstrap 4. </p>
  
  <p>The problem is when I try to show two columns, Articles next to my Profile. Both columns are in an HTML table, but for some reason, they do not show correctly. </p>
  
  <p>For example:</p>
  
  <p><a href="https://i.stack.imgur.com/svDM9.png" rel="nofollow noreferrer">How it looks like using HTML,CSS, and Bootstrap</a></p>
  
  <p>Here is how it looks when I insert everything on my Base_layout.html</p>
  
  <p><a href="https://i.stack.imgur.com/eUzPa.png" rel="nofollow noreferrer">How it looks like when it is inserted in my django Base_layout.html</a></p>
  
  <p>Here is my Base_layout, which has the code inside the table to show the articles of the blog (<code>{% load bootstrap4 %} {% load static from staticfiles %}</code> are included in the top of the document):</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;!-- Blog Entries Column --&gt;
          &lt;div class="col-md-8"&gt;
              &lt;div class="card mb-4" class="article-detail"&gt;
              {% block content %}
              {% endblock %}
              &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;!-- Pagination --&gt;
        &lt;ul class="pagination justify-content-center mb-4"&gt;
          &lt;li class="page-item"&gt;
              &lt;a class="page-link" href="#"&gt;&amp;larr; Older&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="page-item disabled"&gt;
              &lt;a class="page-link" href="#"&gt;Newer &amp;rarr;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- Sidebar Widgets Column --&gt;
      &lt;div class="col-md-4"&gt;
          &lt;div class="card" style="width: 18rem;"&gt;
              &lt;img src="{% static 'profile.jpg' %}" class="rounded-circle card-img-top" alt=""&gt;
              &lt;div class="card-body"&gt;
                  &lt;h5 class="card-title"&gt;Leandro Fraisinet&lt;/h5&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;a href="#" class="btn btn-primary"&gt;More&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;            
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the code that is to be shown by  Blog Entries Column 
  Article_list html:</p>
  
  <pre><code>{% extends 'base_layout.html' %}
  {% load bootstrap4 %}
  
   {% block content %}
  
  
          &lt;h1&gt; &lt;/h1&gt;
          {% for article in articles %}
          &lt;div class="card-body" class="article"&gt;
            &lt;img class="card-img-top" src="{{ article.thumb.url}}" alt="Main post image"&gt;
  
             &lt;h2 class="card-title"&gt;&lt;a href="{% url 'detail' slug=article.slug%}"&gt;{{article.title}}&lt;/a&gt;&lt;/h2&gt;
            &lt;p class="card-text"&gt;{{article.snippet}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="card-footer text-muted"&gt;
              &lt;p&gt;{{article.date}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;h1&gt; &lt;/h1&gt;
          {% endfor%}
   {% endblock %}
  </code></pre>
  
  <p>I think that my main conflict is in  Blog Entries Column  but I do not know how to solve this. 
  Please any extra code that could be useful to solve this let me know.
  Django version, 1.11 Phyton version 2.7, Bootstrap version 4.</p>