title: Bootstrap image and text side by side in a div
body: <p>I am trying to put an image and texts side by side in bootstrap inside a single div.. For that I used the <code>class</code> of <code>thumbnail</code>. But using bootstrap thumbnail it makes the image to go at the top and all the texts at the bottom. </p>
  
  <p>So I changed it a bit to put the image and the texts within the thumbnail only and dividing the thumbnail into two parts. But on resizing the screen into small the problem is arising.. The texts are shifting over the image..</p>
  
  <p>Here is the code of what I tried till now</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-sm-6 col-md-6 col-xs-6"&gt;
  
                &lt;div class="thumbnail" style="border:none; background:white; height:210px;"&gt;
  
                &lt;div class="col-sm-6 col-md-6 col-xs-6"&gt;
                  &lt;img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" /&gt;
                &lt;/div&gt;
  
                &lt;div class="col-sm-6 col-md-6 col-xs-6"&gt;  
  
                  &lt;h3&gt;Hello World&lt;/h3&gt;
                   &lt;p style="font-size:10px; color:#03225C;"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.   &lt;/p&gt;
                &lt;/div&gt;
                &lt;/div&gt;
  
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://tinypic.com/view.php?pic=dvhmwy&amp;s=8#.VMiAc993M8o" rel="noreferrer">Screenshot without resizing</a></p>
  
  <p><a href="http://tinypic.com/view.php?pic=21bsnqr&amp;s=8#.VMiByd93M8o" rel="noreferrer">Screenshot after resizing</a></p>