How to Create Bootstrap 3 Media Objects

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:


Img Avatar1

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.

Img Avatar1

Top align media

make a media on the top of the div by using the class name .media-top

Example:


Img Avatar1

Media Top

Lorem ipsum...

Middle align media

to make a media on middle position vertically use the class name .media-middle

Example:


Img Avatar1

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:


Img Avatar1

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:

Img Avatar1

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.

Img Avatar2

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.

Img Avatar3

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.

Img Avatar4

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.

Img Avatar5

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.

Share The Post On -

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.