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:

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:

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 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:

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:

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:

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:

• Dropdowns - 1000
• Sticky elements - 1020
• Fixed elements - 1030
• Background of (backdrop) modal elements - 1040
• Modal elements 1050
• Popovers - 1060
• Tooltips - 1070

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