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    lt div class  paragraphs  gt     lt div class  row  gt       lt div class  span4  gt         lt div class  content-heading  gt  lt h3 gt Experience  amp nbsp  lt  h3 gt  lt img src     site img success32 png   gt  lt  div gt         lt p gt Donec id elit non mi porta gravida at eget metus  Etiam porta sem malesuada magna mollis euismod  Donec sed odio dui  lt  p gt       lt  div gt     lt  div gt   lt  div gt    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

User · Accepted Answer

You can use floating    lt div class  paragraphs  gt     lt div class  row  gt       lt div class  span4  gt         lt img style  float left  src     site img success32 png   gt         lt div class  content-heading  gt  lt h3 gt Experience  amp nbsp  lt  h3 gt  lt  div gt         lt p style  clear both  gt Donec id elit non mi porta gravida at eget metus  Etiam porta sem malesuada magna mollis euismod  Donec sed odio dui  lt  p gt       lt  div gt     lt  div gt   lt  div gt    If you want the following  lt p gt  to stay at the same line too  remove its  style  clear both    but then you should add   lt div style  clear both  gt  lt  div gt    after it

User · Answer

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     lt div class  paragraphs  gt     lt div class  row  gt       lt div class  span4  gt         lt div class  clearfix content-heading  gt             lt img class  pull-left  src     site img success32 png   gt             lt h3 gt Experience  amp nbsp  lt  h3 gt         lt  div gt         lt p gt Donec id elit non mi porta gravida at eget metus  Etiam porta sem malesuada magna mollis euismod  Donec sed odio dui  lt  p gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

I would use Bootstrap s grid to achieve the desired result   The class  img-responsive  works nicely  Something like        lt div class  container-fluid  gt           lt div class  row  gt               lt div class  col-md-3  gt  lt img src    pictures placeholder jpg  class  img-responsive  alt  Some picture  width  410  height  307  gt  lt  div gt               lt div class  col-md-9  gt  lt h1 gt Heading lt  h1 gt  lt p gt Your Information  lt  p gt  lt  div gt           lt  div gt       lt  div gt

User · Answer

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       x000D   x000D   lt div class  row  gt  x000D     lt div class  col-sm-9  gt  x000D      Level 1   col-sm-9 x000D       lt div class  row  gt  x000D         lt div class  col-xs-8 col-sm-6  gt  x000D          Level 2   col-xs-8  col-sm-6 x000D         lt  div gt  x000D         lt div class  col-xs-4 col-sm-6  gt  x000D          Level 2   col-xs-4  col-sm-6 x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For Bootstrap 3     lt div class  paragraphs  gt     lt div class  row  gt       lt div class  col-md-4  gt         lt div class  content-heading clearfix media  gt              lt h3 gt Experience  amp nbsp  lt  h3 gt              lt img class  pull-left  src     site img success32 png   gt         lt  div gt         lt p gt Donec id elit non mi porta gravida at eget metus  Etiam porta sem malesuada magna mollis euismod  Donec sed odio dui  lt  p gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

Starting with Bootstrap v3 3 0 you can use  media-left and  media-body   lt div class  media  gt       lt span class  media-left  gt           lt img src     site img success32 png  alt       gt       lt  span gt       lt div class  media-body  gt           lt h3 class  media-heading  gt Experience lt  h3 gt                   lt  div gt   lt  div gt    Documentation  https   getbootstrap com docs 3 3 components  media

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

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to image