Media Objects in Bootstrap with Examples

The Bootstrap Media Objects like images or videos can be aligned to the left or to the right of some 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.

The media object classes available are:



  • .media
  • .media-body

Bootstrap spacing is used to controlled padding and margin.

Left and Right Alignment

  • “media-left” class is used to left-align a media object.
  • “media-right” class is used to right-align the media object.
  • “media-body” class is used to place the content.

Syntax:

<div class="media-left">
    <img src="...">
</div>
<div class="media-body">
    Content to be placed 
</div>

Below program illustrate the left and right alignment:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
          
        <!-- Link Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
          
        <!-- Link Bootstrap JS and JQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
          
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
    <body>
        <div class="container">
            <h2>Media Object</h2>
              
            <!-- Left-aligned media object -->
            <div class="media">
                <div class="media-left">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png" class="media-object" style="width:60px">
                </div>
              
                <div class="media-body">
                    <h4 class="media-heading">
                        Left-aligned
                    </h4>
                      
                    <p>
                        Use the "media-left" class to 
                        left-align a media object. Text 
                        that should appear next to the 
                        image, is placed inside a container
                        with class="media-body"
                    </p>
                </div>
            </div>
            <hr>
              
            <!-- Right-aligned media object -->
            <div class="media">
                <div class="media-body">
                    <h4 class="media-heading">
                        Right-aligned
                    </h4>
                      
                    <p>
                        Use the "media-right" class to 
                        right-align the media object.
                        Text that should appear next to 
                        the image, is placed inside a 
                        container with class="media-body"
                    </p>
                </div>
                  
                <div class="media-right">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png" class="media-object" style="width:60px">
                </div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output :

Top, Middle or Bottom Alignment:

  • Similar to left and right alignment media object can be aligned top, middle, or bottom.
  • To aligned media to top, middle or bottom use the following classes – media-top, media-middle or media-bottom class

Syntax:

<div class="media-top">
    <img src="...">
</div>
<div class="media-body">
    Content to be placed 
</div>

Below program illustrate the above approach:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <!-- Link Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
          
        <!-- Link Bootstrap JS and JQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
    <body>
        <div class="container">
            <h3>Media Object</h3>
            <br>
              
            <div class="media">
                <img class="align-self-start mr-3" src="https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png" alt="Generic placeholder image" style="width:80px">
                <div class="media-body">
                      
                    <h6 class="media-heading">
                        Media Top
                    </h6>
                      
                    <p
                        The media object can be aligned to 
                        top, middle or bottom.
                    </p>
                      
                    <ul>
                        <li
                            Use the "media-top" class to 
                            top-align a media object.
                        </li>
                        <li>
                            Use the "media-middle" class to 
                            middle-align a media object.
                        </li>
                        <li>
                            Use the "media-bottom" class to 
                            bottom-align a media object.
                        </li>
                    </ul>
                </div>
            </div>
              
            <div class="media">
                <img class="align-self-center mr-3" src="https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png" alt="Generic placeholder image" style="width:80px">
                  
                <div class="media-body">
                    <h6 class="media-heading">Media Top</h6>
                      
                    <p
                        The media object can be aligned to 
                        top, middle or bottom.
                    </p>
                    <ul>
                        <li
                            Use the "media-top" class to 
                            top-align a media object.
                        </li>
                        <li>
                            Use the "media-middle" class to 
                            middle-align a media object.
                        </li>
                        <li>
                            Use the "media-bottom" class to 
                            bottom-align a media object.
                        </li>
                    </ul>
                </div>
            </div>
              
            <div class="media">
                <img class="align-self-end mr-3" src="https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png" alt="Generic placeholder image" style="width:80px">
                <div class="media-body">
                    <h6 class="media-heading">Media Top</h6>
                      
                    <p
                        The media object can be aligned to 
                        top, middle or bottom.
                    </p>
                    <ul>
                        <li
                            Use the "media-top" class to 
                            top-align a media object.
                        </li>
                        <li>
                            Use the "media-middle" class to 
                            middle-align a media object.
                        </li>
                        <li>
                            Use the "media-bottom" class to 
                            bottom-align a media object.
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output :

Media Objects in nested Format

  • If you want one media under the second media, for that you can use the nesting in the media objects
  • Nested .media can be placed within the parent media object’s .media-body class.

Syntax:

<div class="media-left">
    <img src="...">
    <div class="media-left">
        Content to be placed 
    </div>
</div>

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Link Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
          
        <!-- Link Bootstrap JS and JQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
          
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
    <body>
        <div class="container">
            <h3>Nested Media Objects</h3>
            <br>
            <div class="media">
                <div class="media-left">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" class="media-object" style="width:45px">
                </div>
          
                <div class="media-body">
                    <h4 class="media-heading">GeeksForGeeks <small><br><i>Media Object 1</i></small></h4>
          
                    <!-- Nested media object -->
                    <div class="media">
                        <div class="media-left">
                            <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks14-2.png" class="media-object" style="width:45px">
                        </div>
          
                        <div class="media-body">
                            <h4 class="media-heading">
                                GeeksForGeeks 
                                <small><br><i>Media Object 2</i></small>
                            </h4>
          
                            <!-- Nested media object -->
                            <div class="media">
                                <div class="media-left">
                                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/transition-property_CSS_img1.png" class="media-object" style="width:45px">
                                </div>
          
                                <div class="media-body">
                                    <h4 class="media-heading">
                                        GeeksForGeeks 
                                        <small><br><i>Media Object 3</i></small>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output :

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Link BootStrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
          
        <!-- Link Bootstrap JS and JQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
          
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
      
    <body>
        <div class="container">
            <h3>Nested Media Objects</h3>
            <br>
              
            <div class="media">
                <div class="media-left">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" class="media-object" style="width:45px">
                </div>
              
                <div class="media-body">
                    <h6 class="media-heading">GeeksForGeeks <small><br><i>Media Object 1</i></small></h6>
              
                    <!-- Nested media object -->
                    <div class="media">
                        <div class="media-left">
                            <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks14-2.png" class="media-object" style="width:45px">
                        </div>
              
                        <div class="media-body">
                            <h6 class="media-heading">GeeksForGeeks <small><br><i>Media Object 2</i></small></h6>
              
                            <!-- Nested media object -->
                            <div class="media">
                                <div class="media-left">
                                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/transition-property_CSS_img1.png" class="media-object" style="width:45px">
                                </div>
              
                                <div class="media-body">
                                    <h6 class="media-heading">GeeksForGeeks <small><br><i>Media Object 3</i></small></h6>
                                </div>
                            </div>
                        </div>
                    </div>
              
                    <div class="media">
                        <div class="media-left">
                            <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks14-2.png" class="media-object" style="width:45px">
                        </div>
              
                        <div class="media-body">
                            <h6 class="media-heading">GeeksForGeeks <small><br><i>Media Object 4</i></small></h6>
                        </div>
                    </div>
                </div>
            </div>
              
            <div class="media">
                <div class="media-left">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" class="media-object" style="width:45px">
                </div>
              
                <div class="media-body">
                    <h6 class="media-heading">GeeksForGeeks <small><br><i>Media Object 5</i></small></h6>
                </div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output :



My Personal Notes arrow_drop_up

Small things always make you to think big

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.