Bootstrap 4 | Media Objects

The Bootstrap Media Objects like images or videos can be aligned to the left or right with content in an easy and efficient manner. The Bootstrap Media Objects are used where some data is positioned alongside content to build up complicated and recursive components of the content.

Basic Media Object: Use .media class to the container element and place media content inside the child container with .media-body class.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Media Object</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body>
    <h1 class="text-success text-center">GeeksforGeeks</h1>
      
    <h2 class="text-center">Media Object</h2>
      
    <div class="container mt-3">
        <div class="media border p-3">
            <img src=
                    alt="Geeks" 
                    class="mr-3 mt-3 rounded-circle bg-success"
                    style="width:40px;">
              
            <div class="media-body">
                <h3>GeeksforGeeks
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                <p>
                    GeeksforGeeks is a computer science portal. 
                    It is a best programming platform. 
                </p>
            </div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:



Nested Media Objects: The media object can be added inside media object. It is called nested media object.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Media Object</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body>
    <h1 class="text-success text-center">GeeksforGeeks</h1>
      
    <h2 class="text-center">Nested Media Objects</h2>
      
    <div class="container mt-3">
        <div class="media border p-3">
            <img src=
                    alt="Geeks" 
                    class="mr-3 mt-3 rounded-circle bg-success"
                    style="width:40px;">
              
            <div class="media-body">
                <h3>GeeksforGeeks     
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                <p>
                    GeeksforGeeks is a computer science portal. 
                    It is a best programming platform. 
                </p>
                  
                <div class="media p-3">
                    <img src=
                        alt="Geeks" 
                        class="mr-3 mt-3 rounded-circle bg-success"
                        style="width:40px;">
              
                    <div class="media-body">
                        <h5>GeeksforGeeks     
                            <small>
                                <i>Post Modified on 15th May, 2019</i>
                            </small>
                        </h5>
                        <p>
                            GeeksforGeeks is a computer science portal. 
                            It is a best programming platform. 
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Right-Aligned Media Image: Add image after the .media-body container to set the image right-aligned.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Media Object</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body>
    <h1 class="text-success text-center">GeeksforGeeks</h1>
      
    <h2 class="text-center">Right-Aligned Media Objects</h2>
      
    <div class="container mt-3">
        <div class="media border p-3">
            <div class="media-body">
                <h3>GeeksforGeeks     
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                <p>
                    GeeksforGeeks is a computer science portal. 
                    It is a best programming platform. 
                </p>
            </div>
              
            <img src=
                    alt="Geeks" 
                    class="mr-3 mt-3 rounded-circle bg-success"
                    style="width:40px;">
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Top, Middle and Bottom Media Alignment: The .align-self-* classes are used to set the media object on top, middle or bottom of the element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Media Object</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body>
    <h1 class="text-success text-center">GeeksforGeeks</h1>
      
    <h2 class="text-center">Top, Middle or Bottom Media Alignment</h2>
      
    <div class="container mt-3">
          
        <div class="media border p-3">
            <img src=
            alt="Geeks" 
            class="align-self-start mr-3 mt-3 rounded-circle bg-success"
            style="width:40px;">
                      
            <div class="media-body">
                <h3>GeeksforGeeks     
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                <p>
                    GeeksforGeeks is a computer science portal. 
                    It is a best programming platform.  It contains
                    well written, well thought and well explained 
                    computer science and programming articles, 
                    quizzes and ...
                </p>
            </div>
        </div>
          
        <div class="media border p-3">
            <img src=
            alt="Geeks" 
            class="align-self-center mr-3 mt-3 rounded-circle bg-success"
            style="width:40px;">
                      
            <div class="media-body">
                <h3>GeeksforGeeks     
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                <p>
                    GeeksforGeeks is a computer science portal. 
                    It is a best programming platform.  It contains
                    well written, well thought and well explained 
                    computer science and programming articles, 
                    quizzes and ...
                </p>
            </div>
        </div>
          
        <div class="media border p-3">
            <img src=
            alt="Geeks" 
            class="align-self-end mr-3 mt-3 rounded-circle bg-success"
            style="width:40px;">
                      
            <div class="media-body">
                <h3>GeeksforGeeks     
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                <p>
                    GeeksforGeeks is a computer science portal. 
                    It is a best programming platform.  It contains
                    well written, well thought and well explained 
                    computer science and programming articles, 
                    quizzes and ...
                </p>
            </div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.