The bootstrap media object is used to make left or right align media like video or image and the media object is mainly used in waterfall instruction comments or testimonials. Now start to learn Bootstrap 3 Media Objects step by step.
Default bootstrap 3 media
to make a default media in bootstrap 3 take a div with the class name .media and inside that take div with the class name .media-heading and .media-body
Example:
John Doe
Lorem ipsum...
Left-aligned media
use class name .media-left inside a div with the class name .media
Example:
John Doe
Lorem ipsum...
Right align media
use class name .media-right inside a div with the class name .media
Example:
John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Top align media
make a media on the top of the div by using the class name .media-top
Example:
Media Top
Lorem ipsum...
Middle align media
to make a media on middle position vertically use the class name .media-middle
Example:
Media Middle
Lorem ipsum...
Bottom align media
place a media position at the bottom of the div by using the class name .media-bottom
Example:
Media Bottom
Lorem ipsum...
Bootstrap 3 Nested media
To make a nested media in bootstrap 3 write another media inside the body of a media object
Example:
John Doe Posted on February 19, 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Doe Posted on February 20, 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Doe Posted on February 21, 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Jane Doe Posted on February 20, 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Jane Doe Posted on February 19, 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
In this post we have learned how to create Bootstrap 3 Media Objects, Hope the post helped, please provide your comment to make the site more useful and better.
Thanks for Reading.
