Bootstrap image and text side by side in a div

Question

I am trying to put an image and texts side by side in bootstrap inside a single div.. For that I used the class of thumbnail. But using bootstrap thumbnail it makes the image to go at the top and all the texts at the bottom.

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..

Here is the code of what I tried till now

<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">

              <div class="thumbnail" style="border:none; background:white; height:210px;">

              <div class="col-sm-6 col-md-6 col-xs-6">
                <img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
              </div>

              <div class="col-sm-6 col-md-6 col-xs-6">  

                <h3>Hello World</h3>
                 <p style="font-size:10px; color:#03225C;">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.   </p>
              </div>
              </div>

 </div>
</div>

Screenshot without resizing

Screenshot after resizing

Answer 1

Try this

<div class="col-sm-6 col-md-6 col-xs-6">

              <div class="thumbnail" style="border:none; background:white;">

              <div class="col-sm-6 col-md-6 col-xs-12 image-container">
                <img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
              </div>

              <div class="col-sm-6 col-md-6 col-xs-12">  

                <h3>Hello World</h3>
                 <p style="font-size:10px; color:#03225C;">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.   </p>
              </div>
              </div>

 </div>

css code write this in media query if u need only for mobile

.image-container{text-align:center}

in case if u need both the image and text side by side in mobile device, remove the height for the image in media query to mobile devices resolution, give width 100% to the image

Answer 2

You need to make sure you're using div's with the class of row around your columns, also if you're going to have col-xs-6 it sets this columns size (6) on the larger sizes too (no need to use col-sm-6 etc also).

Try this code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

		
	<div class="row" style="border:none; background:white; height:210px;">
		<div class="col-xs-6">
			<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
		</div>
		<div class="col-xs-6">  
			<h3>Hello World</h3>
			<p style="font-size:10px; color:#03225C;">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.</p>
		</div>
	</div>