title: Does Bootstrap align two content like simple grid?
body: <p>I have been working on this for about a week. I aligned two classes within two columns using bootstrap, and made another separate class below the content. when I preview the web page, the separate class is being aligned with the two classes, instead of the seperate class being below the 2 column grid. How can the separate class be placed under a two column bootstrap grid? Below is an image of the result, as well as the code used. Thanks</p>
  
  <pre><code>   &lt;div class="prod_section"&gt;
     &lt;div class="border col-md-6"&gt;
        &lt;img src="help.jpg" class="word" alt="h"&gt;
        &lt;h2 class="header"&gt;SHIRT&lt;/h2&gt;
     &lt;/div&gt;
     &lt;div class="border col-md-6 "&gt;
        &lt;img src="img/help_two.jpg" alt="" class="word"&gt;
        &lt;h2 class="header"&gt; URBAN SHIRT&lt;/h2&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="seperate"&gt;Is BOOTSTRAP suppose to appear like this?&lt;/div&gt;
  
  
  
  .prod_section{
      margin:auto;
      width:1300px;
      margin-top:600px;
      margin-bottom: 600px;
  }
  
  .word{
      max-width:90%;
      /*box-shadow: 10px 10px 20px #bababa;*/
  }
  
  h2{
      font-family: 'Montserrat';
      font-weight:700;
  }
  .header{
      padding-top:20px;
  }
  body{
      background:white;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/U7uYf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U7uYf.jpg" alt="enter image description here"></a></p>