The media class places images nicely near text and can be used with either left or right floats.

Media heading

The image has a pull-left to get it to float to the left. The text stays to the right of the image and will continue to do so until the media body div ends.
So it does behave differently to just including a floating image - where the text would just wrap under the image if it was long enough to extend past the image.

Media heading

This media item is nested inside the previous one and so this new image lines up with the left most edge of the text above.

Media heading

Just for something different, I have put a pull-right on the image in this block.

 

<div class="media">
<img class="media-object pull-left" src="grey-box">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Media body text.

<div class="media">
<img class="media-object pull-left" src="grey-box">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
</div>
<div class="media-body">
Media body text
</div>
</div>

<div class="media">
<img class="media-object pull-right" src="grey-box">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
</div>
<div class="media-body">
body text
</div>
</div>

</div>
</div>
Marianne Brown
Marianne Brown says:
06 March 2014 04:35 PM
Woo-hoo! Comment box nice and wide now. Thanks David!