Issue
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>
Solution
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
Answered By - vas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.