Align image to left of text on same line - Twitter Bootstrap3

Question

Currently I have a paragraph heading and an image to its right, on the same line:

<div class="paragraphs">
  <div class="row">
    <div class="span4">
      <div class="content-heading"><h3>Experience &nbsp </h3><img src="../site/img/success32.png"/></div>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

This works fine - the content-heading and the image are on the same line. However, when I put the image before the content-heading div, they are no longer on the same line. This is what I want to achieve - image then content-heading - on the same line.

score 87 · Answer 1 · answered Aug 10 '12 at 12:01

87

Using Twitter Bootstrap classes may be the best choice :

pull-left makes an element floating left
clearfix allows the element to contain floating elements (if not already set via another class)

<div class="paragraphs">
  <div class="row">
    <div class="span4">
      <div class="clearfix content-heading">
          <img class="pull-left" src="../site/img/success32.png"/>
          <h3>Experience &nbsp </h3>
      </div>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

answered Aug 10 '12 at 12:01

Sherbrow

17,279
3
64
77

4

Actually, there are special classes in [Bootstrap for media](http://twitter.github.io/bootstrap/components.html#media) (e.g. images) aligned the poster wanted it: _media_, _media\_header_ and _media\_body_ – Raul Pinto Jul 04 '13 at 13:11
@RaulPinto Indeed, but it's not really permissive, and it doesn't match the layout of the OP : http://jsbin.com/ipuyut/2/edit – Sherbrow Jul 04 '13 at 17:36
How do I keep the text centered with the image? – CodyBugstein May 28 '14 at 22:19
2

@Imray There is not one solution for vertical alignment. Search around and pick your best match (keywords vertical alignment text image) – Sherbrow May 29 '14 at 20:19

maxwilms · Answer 2 · 2017-09-06T08:15:26.167

48

Starting with Bootstrap v3.3.0 you can use .media-left and .media-body

<div class="media">
    <span class="media-left">
        <img src="../site/img/success32.png" alt="...">
    </span>
    <div class="media-body">
        <h3 class="media-heading">Experience</h3>
        ...
    </div>
</div>

Documentation: https://getbootstrap.com/docs/3.3/components/#media

edited Sep 06 '17 at 08:15

answered Dec 17 '14 at 12:14

maxwilms

1,964
20
23

score 47 · Accepted Answer · answered Aug 10 '12 at 11:17

You can use floating:

<div class="paragraphs">
  <div class="row">
    <div class="span4">
      <img style="float:left" src="../site/img/success32.png"/>
      <div class="content-heading"><h3>Experience &nbsp </h3></div>
      <p style="clear:both">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

If you want the following <p> to stay at the same line too, remove its

style="clear:both"

but then you should add

<div style="clear:both"></div>

after it.

Dilip Kumar · Answer 4 · 2014-08-22T15:54:24.303

8

For Bootstrap 3.

<div class="paragraphs">
  <div class="row">
    <div class="col-md-4">
      <div class="content-heading clearfix media">
           <h3>Experience &nbsp </h3>
           <img class="pull-left" src="../site/img/success32.png"/>
      </div>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

edited Aug 22 '14 at 15:54

answered Dec 10 '13 at 10:01

Dilip Kumar

146
1
4

1

span4 isn't used in Bootstrap 3 – Acyra Jun 28 '14 at 17:55

score 6 · Answer 5 · answered Jan 09 '15 at 18:49

6

I would use Bootstrap's grid to achieve the desired result. The class="img-responsive" works nicely. Something like:

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3"><img src="./pictures/placeholder.jpg" class="img-responsive" alt="Some picture" width="410" height="307"></div>
            <div class="col-md-9"><h1>Heading</h1><p>Your Information.</p></div>
        </div>
    </div>

answered Jan 09 '15 at 18:49

Dave

579
6
7

I would like to know why as well. I've used this approach before, and it has worked for me. Based on the question asked, it seemed like an appropriate solution. – Dave Mar 27 '15 at 03:27
It adds a bunch of padding both to the image and to the text. – Stefan D May 02 '15 at 23:00
@StefanD There are many different ways to fix the padding/gutter. Here are a couple of answers that may help: [How to adjust gutter in Bootstrap 3 grid system](http://stackoverflow.com/questions/19911763/how-to-adjust-gutter-in-bootstrap-3-grid-system) or [Bootstrap 3 Gutter Size](http://stackoverflow.com/questions/19041733/bootstrap-3-gutter-size/19044326) – Dave May 06 '15 at 13:34

score 3 · Answer 6 · answered Apr 20 '16 at 11:54

Use Nesting column

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Align image to left of text on same line - Twitter Bootstrap3

6 Answers6

Linked

Related