Bootstrap multimedia objects
In this chapter we will explain Bootstrap multimedia objects (Media Object). These abstract object style used to create various types of components (for example: blog comments), we can use the photo-text in the component, the image may be left justified or right justified. Media objects can be achieved with less code and text media objects scramble.
Lightweight media object marked characteristic is easy to extend through the simple tag application class to achieve. You can add the following two forms in HTML tags to set the media object:
- .media: This class allows the media objects in the multimedia (images, video, audio) floated to the left or right content block.
- .media-list: If you need a list of the various elements is part of the unordered list, you can use the class.Comments can be used to list and the list of articles.
Let's take a look at the following information about the default media objects .media instance:
Examples
<Div class = "media">
<A class = "pull-left" href = "#">
<Img class = "media-object" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "media object">
</ A>
<Div class = "media-body">
<H4 class = "media-heading"> media title </ h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </ Div>
</ Div>
<Div class = "media">
<A class = "pull-left" href = "#">
<Img class = "media-object" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "media object">
</ A>
<Div class = "media-body">
<H4 class = "media-heading"> media title </ h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. <Div class = "media">
<A class = "pull-left" href = "#">
<Img class = "media-object" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "media object">
</ A>
<Div class = "media-body">
<H4 class = "media-heading"> media title </ h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </ Div>
</ Div>
</ Div>
</ Div>
try it"
The results are as follows:
Let's look at the following examples of the media's list of objects .media-list:
Examples
<Ul class = "media-list">
<Li class = "media">
<A class = "pull-left" href = "#">
<Img class = "media-object" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generic placeholder image">
</ A>
<Div class = "media-body">
<H4 class = "media-heading"> media title </ h4>
<P> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </ P>
<! - Nested media objects ->
<Div class = "media">
<A class = "pull-left" href = "#">
<Img class = "media-object" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generic placeholder image">
</ A>
<Div class = "media-body">
<H4 class = "media-heading"> nested media heading </ h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. <! - Nested media objects ->
<Div class = "media">
<A class = "pull-left" href = "#">
<Img class = "media-object" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generic placeholder image">
</ A>
<Div class = "media-body">
<H4 class = "media-heading"> nested media heading </ h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </ Div>
</ Div>
</ Div>
</ Div>
<! - Nested media objects ->
<Div class = "media">
<A class = "pull-left" href = "#">
<Img class = "media-object" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generic placeholder image">
</ A>
<Div class = "media-body">
<H4 class = "media-heading"> nested media heading </ h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </ Div>
</ Div>
</ Div>
</ Li>
<Li class = "media">
<A class = "pull-right" href = "#">
<Img class = "media-object" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generic placeholder image">
</ A>
<Div class = "media-body">
<H4 class = "media-heading"> media title </ h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </ Div>
</ Li>
</ Ul>
try it"
The results are as follows:
