CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
rikket
rikket

Reputation: 2407

Bootstrap Align Image with text

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 !

<div class="container">
<div class="row">
    <h1>About Me</h1>
    </class>
     <div class="col-md-4">
     <div class="imgAbt">
        <img  width="220" height="220" src="img/me.jpg">
     </div>
     </div>
    <div class="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>

I have also tried .col-md-3 .col-md-pull-9 along with .col-md-9 .col-md-push-3 , however I still was not able to achieve desired results, similar to this design

Upvotes: 14

Views: 148609

Answers (7)

SW4
SW4

Reputation: 71230

You have two choices, either correct your markup so that it uses correct elements and utilizes the Bootstrap grid system:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
<div class="container">
     <h1>About Me</h1>
    <div class="row">
        <div class="col-md-4">
            <div class="imgAbt">
                <img width="220" height="220" src="img/me.jpg" />
            </div>
        </div>
        <div class="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');
<div class="container">
    <h1>About Me</h1>
    <div class="row">
        <div class="col-md-12">
            <img style='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>

Upvotes: 30

Hưng H&#224;
Hưng H&#224;

Reputation: 1

<div class="container">
     <h1>About Me</h1>
    <div class="row">
        <div class="col-md-4">
            <div class="imgAbt">
                <img width="100%" height="100%" src="img/me.jpg" />
            </div>
        </div>
        <div class="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>

Upvotes: 0

user7462729
user7462729

Reputation: 39

i am a new bee ;p . And i faced the same problem. And the solution is BS Media objects. please see the code.. 

<div class="media">
   <div class="media-left media-top">
    <img src="something.png" alt="@l!" class="media-object" width="20" height="50"/>
    </div>
   <div class="media-body">
      <h2 class="media-heading">Beside Image</h2>
   </div>
</div>

Upvotes: 0

Sparkz
Sparkz

Reputation: 83

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

Ex:

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

Upvotes: 3

Ashish
Ashish

Reputation: 333

I think this is helpful for you

<div class="container">
        <div class="page-header">
                <h1>About Me</h1>
            </div><!--END page-header-->
        <div class="row" id="features">
                <div class="col-sm-6 feature">
                        <img src="http://lorempixel.com/200/200" alt="Web Design" class="img-circle">
                </div><!--END feature-->

                <div class="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-->

Upvotes: 0

Nirvana 11b
Nirvana 11b

Reputation: 1

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

          </div>
      </div>
   </div>

Upvotes: 0

WhiteLine
WhiteLine

Reputation: 1989

use the grid-system of boostrap , more information here

for example

<div class="row">
  <div class="col-md-4">here img</div>
  <div class="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)

Upvotes: 6

Related Questions