Media Object in Bootstrap, concepts and usage

Media Object in Bootstrap, concepts and usage


In the following lesson, Taimienphi.vn will introduce you to Media Object in Bootstrap, in addition readers can refer to some other articles already on Taimienphi.vn to learn more about Card in Bootstrap.


To learn in detail how to use Media Object in Bootstrap, read along with the Bootstrap lesson below of Taimienphi.vn.

Learn Media Object in Bootstrap

Table of Contents:
1. Use Media Object in Bootstrap
2. Create nested Media Objects
3. Align Media Object in Bootstrap
4. Create Media List in Bootstrap

1. Use Media Object in Bootstrap

Suppose if you want to create a layout that contains left or right-aligned media objects, such as images or videos, in addition to textual content, such as blog comments, Tweets , …. To do this we use the Media Object in Bootstrap.

For example: in the example below, use Media Object in Bootstrap to create a layout containing multimedia objects next to the text content:

media object in bootstrap

The result will look like this:

media object in bootstrap 2

In addition we can also create different variants of the media component by applying image modification layers like .rounded or .rounded-circle to create a circular image, as in the example below:

media object in bootstrap 3

The result will look like this:

media object in bootstrap 4

2. Create nested Media Objects

The Media object in Bootstrap can also be nested, ie this Media object can be nested within another Media object. This option is useful for creating comment topics in a blog post.

For example: The following example illustrates how to create a nested Media Object in Bootstrap:

media object in bootstrap 5

The result will look like this:

media object in bootstrap 6

3. Align Media Object in Bootstrap

To align text and multimedia content (images) horizontally, we just need to tweak the HTML code as in the example below:

media object in bootstrap 7

The result will look like this:

media object in bootstrap 8

We can also align images or other multimedia objects in the center or bottom corner of content blocks using the flexbox utility layers. Such use class .align-self-center to align content vertically and layers .align-self-end to align content in the lower corner. By default, the media content in the media object is aligned at the top, see the example below:

media object in bootstrap 9

The result will look like this:

media object in bootstrap 10

4. Create Media List in Bootstrap

To create media list in Bootstrap, we use list elements in HTML and media object classes. Just apply the class .list-unstyled on the elements ul or ol, and class .media on the child element li.

For example: The following example illustrates how to create a media list in Bootstrap:

media object in bootstrap 11

The result will look like this:

media object in bootstrap 12

https://thuthuat.taimienphi.vn/media-object-in-bootstrap-51121n.aspx
The above lesson Taimienphi.vn has just introduced you to Media Object in Bootstrap, in the next lesson, Taimienphi.vn will introduce you more about icon in Bootstrap.

.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *