Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

Bootstrap Align Image With Text

Post a Comment
I am trying to align an image on the left side with text using boostrap, and when page is viewed on mobile devices the images becomes centred on top of the text !
);
<divclass="container"><h1>About Me</h1><divclass="row"><divclass="col-md-4"><divclass="imgAbt"><imgwidth="220"height="220"src="img/me.jpg" /></div></div><divclass="col-md-8"><p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p></div></div></div>

Or, if you wish the text to closely wrap the image, change your markup to:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
<divclass="container"><h1>About Me</h1><divclass="row"><divclass="col-md-12"><imgstyle='float:left;width:200px;height:200px; margin-right:10px;'src="img/me.jpg" /><p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p></div></div>

Solution 2:

use the grid-system of boostrap , more information here

for example

<divclass="row"><divclass="col-md-4">here img</div><divclass="col-md-4">here text</div></div>

in this way when the page will shrink the second div(the text) will be found under the first(the image)

Solution 3:

Try using .pull-left to left align image along with text.

Ex:

<p>At the timeall text elements goes here.At the timeall text elements goes here. At the timeall text elements goes here.<img src="images/hello-missing.jpg" class="pull-left img-responsive" style="padding:15px;" />to uncovering the truth .</p>

Solution 4: 

<divclass="container"><h1>About me</h1><divclass="row"><divclass="pull-left "><imgsrc="http://lorempixel.com/200/200"class="col-lg-3"class="img-    responsive"alt="Responsive image"><pclass="col-md-4">Lots of text here... </p></div></div></div></div>

Solution 5:

I think this is helpful for you

<divclass="container"><divclass="page-header"><h1>About Me</h1></div><!--END page-header--><divclass="row"id="features"><divclass="col-sm-6 feature"><imgsrc="http://lorempixel.com/200/200"alt="Web Design"class="img-circle"></div><!--END feature--><divclass="col-sm-6 feature"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p></div><!--END feature--></div><!--end features--></div><!--end container-->

Post a Comment for "Bootstrap Align Image With Text"