Bootstrap 3 Media Objects
Display text alongside objects such as images with Bootstrap's media objects.
Bootstrap's media objects component provides an easy way to align text and images when presenting them alongside each other. Useful for UI components such as blog comments, Tweets, etc.
Nested Media Objects
You can nest media objects inside each other (i.e. the whole media block). The nested media block will be indented by default.
Horizontal Alignment
Swap .media-left with .media-right to position the media object to the right of the media body (heading/text).
You'll also need to swap the position of the media object and media body in your markup (so that the heading and text come before the image).
Vertical Alignment
Media objects are top-aligned by default. You can change this by adding either .media-middle or .media-bottom to .media-left or .media-right (eg, class="media-left media-middle").
Middle
Bottom
Two Media Objects
You can place more than one image into a media block.
Vertical
Here, I've placed two <img> elements inside a single .media-left, which results in the images being stacked vertically.
Horizontal
In this case, both images are nested inside their own .media-left which results in them being displayed horizontal to each other.
Left & Right Aligned
You can have two media objects appear within a media block — one to the left and one to the right. Simply use .media-left for the left one and .media-right for the right one.
The media body will need to be inserted between them in the markup.
Media Lists
You can create a media list by placing media objects inside a list. Media lists can be useful for presenting user comment threads, article lists, etc.
To create a media list, apply the .media-list class to the <ul> tag, and the .media class to the <li> tag.