Bootstrap Align Image with text

Question

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     lt div class  container  gt   lt div class  row  gt       lt h1 gt About Me lt  h1 gt       lt  class gt        lt div class  col-md-4  gt        lt div class  imgAbt  gt           lt img  width  220  height  220  src  img me jpg  gt        lt  div gt        lt  div gt       lt div class  col-md-8  gt  lt p gt 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 lt  p gt  lt  div gt   lt  div gt   lt  div gt    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

User · Accepted Answer

You have two choices  either correct your markup so that it uses correct elements and utilizes the Bootstrap grid system    x000D   x000D   import url  http   getbootstrap com dist css bootstrap css    x000D   lt div class  container  gt  x000D        lt h1 gt About Me lt  h1 gt  x000D       lt div class  row  gt  x000D           lt div class  col-md-4  gt  x000D               lt div class  imgAbt  gt  x000D                   lt img width  220  height  220  src  img me jpg    gt  x000D               lt  div gt  x000D           lt  div gt  x000D           lt div class  col-md-8  gt  x000D               lt p gt 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 lt  p gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Or  if you wish the text to closely wrap the image  change your markup to    x000D   x000D   import url  http   getbootstrap com dist css bootstrap css    x000D   lt div class  container  gt  x000D       lt h1 gt About Me lt  h1 gt  x000D       lt div class  row  gt  x000D           lt div class  col-md-12  gt  x000D               lt img style  float left width 200px height 200px  margin-right 10px   src  img me jpg    gt  x000D               lt p gt 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 lt  p gt  x000D           lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

Try using  pull-left to left align image along with text   Ex    lt p gt At the time all text elements goes here At the time all text elements goes here  At the time all text elements goes here  lt img src  images hello-missing jpg  class  pull-left img-responsive  style  padding 15px     gt  to uncovering the truth   lt  p gt

User · Answer

x000D   x000D   lt div class  container  gt  x000D        lt h1 gt About Me lt  h1 gt  x000D       lt div class  row  gt  x000D           lt div class  col-md-4  gt  x000D               lt div class  imgAbt  gt  x000D                   lt img width  100   height  100   src  img me jpg    gt  x000D               lt  div gt  x000D           lt  div gt  x000D           lt div class  col-md-8  gt  x000D               lt p gt 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 lt  p gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

i am a new bee  p   And i faced the same problem  And the solution is BS Media objects  please see the code      lt div class  media  gt      lt div class  media-left media-top  gt       lt img src  something png  alt   l   class  media-object  width  20  height  50   gt       lt  div gt      lt div class  media-body  gt         lt h2 class  media-heading  gt Beside Image lt  h2 gt      lt  div gt   lt  div gt

User · Answer

I think this is helpful for you   lt div class  container  gt           lt div class  page-header  gt                   lt h1 gt About Me lt  h1 gt               lt  div gt  lt  --END page-header-- gt           lt div class  row  id  features  gt                   lt div class  col-sm-6 feature  gt                           lt img src  http   lorempixel com 200 200  alt  Web Design  class  img-circle  gt                   lt  div gt  lt  --END feature-- gt                    lt div class  col-sm-6 feature  gt                           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  lt  p gt                   lt  div gt  lt  --END feature-- gt               lt  div gt  lt  --end features-- gt       lt  div gt  lt  --end container-- gt

User · Answer

lt div class  container  gt             lt h1 gt About me lt  h1 gt          lt div class  row  gt            lt div class  pull-left   gt                lt img src  http   lorempixel com 200 200  class  col-lg-3  class  img-    responsive  alt  Responsive image  gt                   lt p class  col-md-4  gt Lots of text here     lt  p gt                    lt  div gt              lt  div gt         lt  div gt      lt  div gt

User · Answer

use the grid-system of boostrap   more information here  for example   lt div class  row  gt     lt div class  col-md-4  gt here img lt  div gt     lt div class  col-md-4  gt here text lt  div gt   lt  div gt    in this way when the page will shrink the second div the text  will be found under the first the image

[html] Bootstrap Align Image with text

Examples related to html

Examples related to css

Examples related to twitter-bootstrap