Nesting in Bootstrap Media Objects

We can place multiple media objects inside a parent media object just by using multiple .media classes inside the .media-body of the parent media class.

Example 3: This example illustrates the Bootstrap Media Objects for nesting the media along with the content.

HTML

<!doctype html>
<html lang="en">
<head>
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no">
                   
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>w3wiki!</title>
</head>

<body>
    <h1 class="text-success">w3wiki!</h1>
    <div class="media"> 
        <img class="mr-3" 
             src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
             width="100"
             height="100"
             alt="Alternate image">
        <div class="media-body">
            <h5 class="mt-0">
                Media heading Example2
            </h5> 
            w3wiki Bootstrap Media Content
            <div class="media mt-3">
                <a class="pr-3" href="#">
                     <img src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                          width="100" 
                          height="100" 
                          alt="Alternate image"> 
                </a>
                <div class="media-body">
                    <h5 class="mt-0">
                        Media heading Example2 nested
                    </h5> 
                    w3wiki Bootstrap Media Content 
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Explain media object and their types in Bootstrap

Media Objects in Bootstrap allow for the creation of flexible and reusable components, comprising images or icons alongside textual content. They facilitate the presentation of complex data in a visually appealing and structured manner.

The two main classes of media objects are:

class	Description
.media	Container for media content, such as images and text.
.media-body	Container for textual content within a media object.

media object and their types in Bootstrap:

Table of Content

Basic Media Object:
Lists in Bootstrap Media Objects:
Nesting in Bootstrap Media Objects:
Order in Bootstrap Media Objects:
Alignment in Bootstrap Media Objects:

Approach:

Wrap the child elements inside a .media class.
Then use a <img> tag to specify the media content like images.
Then inside the .media-body class, add the media contents.
We can also create nested media contents inside a parent .media-body class.

To include the Bootstrap media objects in the website, we need to perform the following steps:

Step 1: Include Bootstrap CSS in the HTML <head> section to load the stylesheet.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>

Add the Bootstrap JavaScript plugin and dependency.

<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>

Step 2: We can directly copy the Bootstrap starter template as given in the official Bootstrap documentation.

HTML

<!doctype html>
<html lang="en">
<head>
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no">
                   
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>Hello, world!</title>
</head>

<body>
    <h1>Hello, world!</h1>
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    
    <script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js" 
            integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
            integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
            crossorigin="anonymous">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
            integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
            crossorigin="anonymous">
    </script>
</body>
</html>

We will utilize the starter template for building the webpage using the Bootstrap media object.

Tags:

#Bootstrap-Questions #Bootstrap #Web Technologies

Lists in Bootstrap Media Objects:

Order in Bootstrap Media Objects:

Nesting in Bootstrap Media Objects

Explain media object and their types in Bootstrap

Similar Reads