Get up to 80 % extra points for free! More info:

Lesson 25 - Bootstrap - Multimedia objects and containers

In the previous lesson, Bootstrap - Flex utilities 2, we finished flex utilities. In today's CSS tutorial, we're going to introduce media objects and containers.

Media objects

Media objects are components which you surely know from social media, representing statuses or comments. In the left part of the component there's an avatar or generally a picture, in the right part a heading and text is placed. Why would we code social components by ourselves when we have Bootstrap :) Again, we've everything prepared. We're going to use at least user comments/reviews in most of our web projects.

Example

How else would we start if not with an example. The basic HTML structure of a media object is as follows:

<div class="media">
    <img class="mr-3" src="https://www.ict.social/images/1/css/bootstrap/avatar.png" alt="David Capka" width="64" height="64">
    <div class="media-body">
        <h5 class="mt-0">David Capka, 13:05</h5>
        Today, when asking for a mortgage, I was asked what my last job was. I replied that I've never been employed :)
    </div>
</div>

The whole component is wrapped in a <div> element with the .media class. Inside, we place an image, usually with a class defining the margin, e.g. .mr-3. The second nested element is a <div> with the .media-body class, containing the body of the media object.

A live demo in the browser:

Media objects in Bootstrap
media_objects.html

Nesting

The next example shows nesting of media objects into themselves, allowing us to render nested discussions, for example comments under a status. We nest other media objects into the body, under the content of the related object.

<div class="media">
    <img class="mr-3" src="https://www.ict.social/images/1/css/bootstrap/avatar.png" alt="David Capka" width="64" height="64">
    <div class="media-body">
        <h5 class="mt-0">David Capka, 13:05</h5>
        Today, when asking for a mortgage, I was asked what my last job was. I replied that I've never been employed :)

        <div class="media mt-3">
            <a class="pr-3" href="https://www.itnetwork.cz/portfolio/17">
                <img class="mr-3" src="https://www.ict.social/images/1/css/bootstrap/avatar_david.png" alt="David Jancik" width="64" height="64">
            </a>
            <div class="media-body">
                <h5 class="mt-0">David Jancik, 14:22</h5>
                Better go to the gym with me! :P
            </div>
        </div>
    </div>
</div>

The result:

Media objects in Bootstrap
nested_media_ob­jects.html

Alignment and order

Because the layout of media objects is made by flexbox, we can customize it using flex utilities. Let's have a look at how to align avatars at the end of the post instead of at the start, by assigning the .align-self-end class to the <img> element. We can change the order of the elements as well, e.g. move the image to the right. We'll swap the <img> and <div> elements and set the left margin to the image instead of the right margin.

<div class="media">
    <div class="media-body">
        <h5 class="mt-0">David Capka, 13:05</h5>
        Today, when asking for a mortgage, I was asked what my last job was. I replied that I've never been employed :)
    </div>
    <img class="align-self-end ml-3" src="https://www.ict.social/images/1/css/bootstrap/avatar.png" alt="David Capka" width="64" height="64">
</div>

The result:

Media objects in Bootstrap
media_objects_a­lignment.html

Media lists

We can use the .media class on the <li> elements of the <ul> or <ol> lists. However, we have to remove all default styles of the list first using the .list-unstyled class. We use similar lists to render course lessons here on the ICT.social network as well.

<ul class="list-unstyled">
    <li class="media">
        <img class="mr-3" src="https://www.ict.social/images/1/css/bootstrap/bootstrap-stack.png" alt="Bootstrap course" width="96" height="96">
        <div class="media-body">
            <h5 class="mt-0 mb-1">Introduction to the Bootstrap CSS framework</h5>
            An introduction to the most popular CSS framework explains why to use frameworks. We'll create our first website and show where to find free templates.
        </div>
    </li>
    <li class="media my-4">
        <img class="mr-3" src="https://www.ict.social/images/1/css/bootstrap/bootstrap-stack.png" alt="Bootstrap course" width="96" height="96">
        <div class="media-body">
            <h5 class="mt-0 mb-1">Bootstrap - Reboot</h5>
            In this tutorial, we'll describe how Reboot resets the default CSS style and which conventions we should follow while working with the Bootstrap framework.
        </div>
    </li>
    <li class="media">
        <img class="mr-3" src="https://www.ict.social/images/1/css/bootstrap/bootstrap-stack.png" alt="Bootstrap course" width="96" height="96">
        <div class="media-body">
            <h5 class="mt-0 mb-1">Bootstrap - Typography</h5>
            In this tutorial, we'll mention first Bootstrap classes for styling headings and subheadings, abbreviations, and lists. We'll introduce utility classes.
        </div>
    </li>
</ul>

The result:

Media objects in Bootstrap
media_lists.html

Containers

Because we're getting to the grid system, it's time to introduce containers. We use these in Bootstrap mainly for centering and with the grid system. We can create the simplest container for some other elements by assigning the .container class. The container stretches to fill the whole width on smaller viewports but keeps fixed width depending on the current breakpoint on larger ones. We add the colored background in the example below just to make the borders of the container visible.

<div class="container bg-primary">
    Container
</div>

The result in the browser:

Container in Bootstrap
container.html

We can also use the .container-fluid class. Unlike the .container, this class stretches the container to always fill 100% of the width, as you'd expect from a <div>:

<div class="container-fluid bg-primary">
    Fluid container
</div>

The result:

Container in Bootstrap
container_flu­id.html

Z-index

Bootstrap sets the value of the z-index CSS property to its components rendered over some content in such a way so that no collisions would occur. For example a Dropdown button should always be shown over the regular content. If we use a modal dialog somewhere, it should be rendered over both the regular content and Dropdown buttons. Tooltips should be rendered over everything since they can be used both in the regular content or the modal content.

Bootstrap assigns the following z-index values to these overlay components. If we added our own component to the page which would overlay the content, we should assign a proper z-index to it, consistent with these values:

In the next lesson, Bootstrap - Introduction to the grid systems, we'll finally introduce the Grid system in Bootstrap :)


 

Previous article
Bootstrap - Flex utilities 2
All articles in this section
Bootstrap
Skip article
(not recommended)
Bootstrap - Introduction to the grid systems
Article has been written for you by David Capka Hartinger
Avatar
User rating:
No one has rated this quite yet, be the first one!
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities