Skip to content
Related Articles

Related Articles

Bootstrap 4 | Media Objects
  • Last Updated : 31 May, 2019

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:




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

Output:

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

Example:






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

Output:

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

Example:




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

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:




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

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :