title: Bootstrap: adapt column height to text length on mobile
body: <p>I am trying to adapt the columns to the text length on <strong>mobile</strong> using the Bootstrap framework.</p>
  
  <p>If you go mobile you can see that the text goes outside the columns.</p>
  
  <p>Is possible to fix it?</p>
  
  <p>I prepared here an example:</p>
  
  <p><a href="https://www.bootply.com/1adDvvRmVt" rel="nofollow noreferrer">https://www.bootply.com/1adDvvRmVt</a></p>
  
  <p>Here the Code:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="col-md-6" style="margin-bottom: 20px;"&gt;
  
  &lt;div class="col-md-12" style="height:250px; background-color: red; color: white;text-align: center; font-size: 18px;"&gt;
  
      &lt;i class="fa fa-play" aria-hidden="true" style="font-size: 50px; padding-top: 60px;"&gt;&lt;/i&gt;&lt;br&gt;
  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="col-md-6"&gt;
  
  &lt;div class="col-md-12" style="height:250px; background-color: green; color: white;text-align: center; font-size: 18px;"&gt;
  
      &lt;i class="fa fa-play" aria-hidden="true" style="font-size: 50px; padding-top: 60px;"&gt;&lt;/i&gt;&lt;br&gt;
  
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.
  
   &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;/div&gt;
  
   &lt;/div&gt;
  
   &lt;div class="container" style="margin-top: 20px;"&gt;
  
   &lt;div class="row"&gt;
  &lt;div class="col-md-6" style="margin-bottom: 20px;"&gt;
  
    &lt;div class="col-md-12" style="height:250px; background-color: red; color: white;text-align: center; font-size: 18px;"&gt;
  
      &lt;i class="fa fa-play" aria-hidden="true" style="font-size: 50px; padding-top: 60px;"&gt;&lt;/i&gt;&lt;br&gt;
  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.consectetur adipiscing elit.
  
   &lt;/div&gt;
  
  &lt;/div&gt;
  
   &lt;div class="col-md-6"&gt;
  
    &lt;div class="col-md-12" style="height:250px; background-color: green; color: white;text-align: center; font-size: 18px;"&gt;
  
      &lt;i class="fa fa-play" aria-hidden="true" style="font-size: 50px; padding-top: 60px;"&gt;&lt;/i&gt;&lt;br&gt;
  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here a screenshot of the problem:</p>
  
  <p><a href="https://i.stack.imgur.com/ER00F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ER00F.png" alt="enter image description here"></a></p>