Open In App

What is media object and explain there types in Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about the Bootstrap media object, which is helpful to place the media alongside the text. Also, we will understand the various ways to use the media with text & its implementation through the examples. Media objects are the bootstrap component that helps to build repetitive design in Bootstrap where some media is positioned either in a left-aligned or right-aligned manner along with text content that does not wrap around the media. The media objects require two Bootstrap classes for the wrapping .media and .media-body content around it.

We will be using the Bootstrap CDN links to import them into the HTML file.

<!–Bootstrap CSS Link –>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css” integrity=”sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l” crossorigin=”anonymous”/>

<!–Bootstrap Javascript Link –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anonymous”>
</script>

After adding the required CDN links, we will use the below simple code for media-object to our HTML file:

<div class="media"> 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2.jpg" 
         class="align-self-end mr-3" 
         alt="img" />
    <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        <p>
            Geeksforgeeks platform has been designed 
            for every geek wishing to expand their 
            knowledge, share their knowledge and is 
            ready to grab their dream job. 
        </p>
    </div>
</div>

Example: This example describes simple media & media-body objects.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
          crossorigin="anonymous">
    <title>Media Object</title>
</head>
  
<body>
    
  <!--Adding media class-->
    <div class="media"
        <img src=
             class="mr-3" 
             alt="img">
        
      <!--Adding media-body class-->
        <div class="media-body">
            <h5 class="mt-0">Media heading</h5>
            <p>
                Geeksforgeeks platform has been 
                designed for every geek wishing 
                to expand their knowledge, share 
                their knowledge and is ready to 
                grab their dream job.
            </p>
        </div>
    </div>
</body>
  
</html>


Output:

Sample media-object

There are different types of media objects in Bootstrap.

Nested media object: We can make nested media-object inside Bootstrap. To make nested media object, we have to add media objects inside the .media-body class. In Nested media object, the .media can be placed inside the parent media object’s .media-body class.

Syntax:

<div class="media-left">
    <img src="url">
    <div class="media-left">
        Content 
    </div>
</div>

Example: This example describes the nested media body objects.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
          crossorigin="anonymous">
    <title>Media Object</title>
</head>
  
<body>
    
  <!--media class -->
    <div class="media"
      <img src=
           class="mr-3" 
           alt="img">
        
      <!--media-body class -->
      <div class="media-body">
          <h5 class="mt-0">Media heading</h5>
          <p>
              Geeksforgeeks platform has been 
              designed for every geek wishing 
              to expand their knowledge, share 
              their knowledge and is ready to 
              grab their dream job.
          </p>
            
          <!--Nested media class -->
          <div class="media"
              <img src=
                  class="mr-3" alt="img">
                
              <!--Nested media-body class -->
              <div class="media-body">
                  <h5 class="mt-0">Media heading</h5>
                  <p>
                      Geeksforgeeks platform has been 
                      designed for every geek wishing 
                      to expand their knowledge, share 
                      their knowledge and is ready to 
                      grab their dream job.
                  </p>
                    
                  <!--Nested media class -->
                  <div class="media"
                      <img src=
                           class="mr-3" 
                           alt="img">
                        
                      <!--Nested media-body class -->
                        <div class="media-body">
                            <h5 class="mt-0">Media heading</h5>
                            <p>
                              Geeksforgeeks platform has been 
                              designed for every geek wishing 
                              to expand their knowledge, share 
                              their knowledge and is ready to 
                              grab their dream job.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Nested media object

  • Alignment: We can align the media inside the media-object with the help of the flexbox utility classes. To align media to top, middle or bottom, we can use these classes: media-top, media-middle, or media-bottom class.

Syntax:

<div class="media-top">
    <img src="url">
</div>
<div class="media-body">
    Content
</div>

Example: This example describes the media-object aligned to the top, middle, or bottom of the media.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
          crossorigin="anonymous">
    <title>Media Object</title>
</head>
  
<body>
    
  <!--Top alignment-->
    <div class="media"
        <img src=
             class="align-self-start mr-3" 
             alt="img">
        <div class="media-body">
            <h5 class="mt-0">Media heading</h5>
            <p>
                GeeksforGeeks platform has been designed
                for every geek wishing to expand their 
                knowledge , share their knowledge and is
                ready to grab their dream job. 
            </p>
  
        </div>
    </div>
    
  <!--Center alignment-->
    <div class="media"
        <img src=
             class="align-self-center mr-3"
             alt="img">
        <div class="media-body">
            <h5 class="mt-0">Media heading</h5>
            <p>
                GeeksforGeeks platform has been designed
                for every geek wishing to expand their 
                knowledge , share their knowledge and is
                ready to grab their dream job. 
            </p>
  
        </div>
    </div>
    
  <!--Bottom alignment-->
    <div class="media"
        <img src=
             class="align-self-end mr-3" 
             alt="img">
        <div class="media-body">
            <h5 class="mt-0">Media heading</h5>
            <p>
                GeeksforGeeks platform has been designed
                for every geek wishing to expand their 
                knowledge , share their knowledge and is
                ready to grab their dream job. 
            </p>
  
        </div>
    </div>
</body>
  
</html>


Output:

Media object aligned to the start, middle & bottom

  • Media object based list: In bootstrap, we can add media objects inside the list as the list-items, and use them to create a media object-based list.

Syntax:

<ul class="list-unstyled">
  <li class="media">
    <img src="url" />
    <div class="media-body">Content</div>
  </li>
</ul>

Example: This example describes the media object-based list.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
          crossorigin="anonymous">
    <title>Media Object</title>
</head>
  
<body>
    
  <!--Unordered list style -->
    <ul class="list-unstyled">
        <li class="media"
           <img src=
                class="mr-3" 
                alt="logo">
            <div class="media-body">
                <h5 class="mt-0 mb-1">List-based media object</h5>
                <p>
                  GeeksforGeeks platform has been designed for 
                  every geek wishing to expand their knowledge,
                  share their knowledge and is ready to grab their
                  dream job. 
                </p>
  
            </div>
        </li>
        <li class="media my-4"
            <img src=
                class="mr-3" 
                alt="logo">
            <div class="media-body">
                <h5 class="mt-0 mb-1">List-based media object</h5>
                <p>
                  GeeksforGeeks platform has been designed for 
                  every geek wishing to expand their knowledge,
                  share their knowledge and is ready to grab their
                  dream job. 
                </p>
  
            </div>
        </li>
        <li class="media"
            <img src=
                class="mr-3" 
                alt="logo">
            <div class="media-body">
                <h5 class="mt-0 mb-1">List-based media object</h5>
                <p>
                  GeeksforGeeks platform has been designed for 
                  every geek wishing to expand their knowledge,
                  share their knowledge and is ready to grab their
                  dream job.
                </p>
  
            </div>
        </li>
    </ul>
</body>
  
</html>


Output:

Media object list

The media object in Bootstrap is a very useful component that we can use for different purposes like making a Twitter clone where we can use to create posts, we can also use to create a news website clone where we can use this media object concept. Thus, media object makes our works very easy by positioning the media along with the text content in an ordered manner.

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari


Last Updated : 31 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads