Bootstrap - Media Object

Rubleen Kaur
Last Updated: May 13, 2022

Introduction

In this article, we will discuss the bootstrap- Media Object. The Media Objects help us build complex and repetitive components to position the media alongside the content. Remember - the Bootstrap Media Object has been discontinued from version 5. But we can still create a layout that can contain left- or right-aligned media objects like images or videos and textual content like Tweets and blogs by using the flex and spacing utility classes. For exploring the things in this blog, we will be using Bootstrap 4. Let's discuss these in detail. 

Media Object Classes

As per the introduction, you know that Bootstrap Media Objects are used to position the media on our websites and the textual content. The two available media object classes are:

  • .media - This class allows you to float a media object( images, video, and audio) to either the left or the right side of the content block.
  • .media-body - This class is used to create an unordered list for comment threads or articles. 


Below is an example of illustrating a default media object,

<!DOCTYPE html>
<html>
   <head>
      <title>Coding Ninjas Example</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="/bootstrap/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="media">
         <a class="pull-left" href="#">
            <img class="media-object" height= 10% width = 10% src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png"
            alt="Media Object">
         </a>
         <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            Be a Ninja
            Be a Ninja
            Be a Ninja

         </div>
      </div>
      <div class="media">
         <a class="pull-left" href="#">
            <img class="media-object" height= 10% width = 10% src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png"
            alt="Media Object">
         </a>
         <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            Be a Ninja
            Be a Ninja
            Be a Ninja
            <div class="media">
               <a class="pull-left" href="#">
                  <img class="media-object" height= 10% width = 10% src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png"
                  alt="Media Object">
               </a>
               <div class="media-body">
                  <h4 class="media-heading">Media heading</h4>
                  Be a Ninja
                  Be a Ninja
                  Be a Ninja
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

 

OUTPUT

Alignment of Media Objects

Bootstrap spacing allows us to control the padding and margin. We can align our objects either to the left or right, using the available classes.

To align our objects, we have three available classes,

  • media-left: This class is used to left-align our media objects. 
  • media-right: This class is used to right-align our media objects.
  • media-body: This class is used to place our content.


Let’s look at the syntax to implement them,

<div class="media-left">
    <img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png">
</div>
<div class="media-body">
    Demo content
</div>

 

Below, we have an example that illustrates the left and right alignment. 

<!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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd
                     /popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
         
        <title>Coding Ninja Example</title>
    </head>
    <body>
        <div class="container">
            <h2>Bootstrap - Media Object</h2>
             <br>
            <!-- Left-aligned media object -->
            <div class="media">
                <div class="media-left">
                    <img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" 
                    class="media-object" style="width:60px">
                </div>
             
                <div class="media-body">
                    <h4 class="media-heading">
                        Left-aligned
                    </h4>                    
                    <p>
                        The "media-left" class is used to left-align a media object. The text that will now 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>
                        The "media-right" class is used to right-align the media object. The text will now appear aside the image, is placed inside a container with class="media-body"
                    </p>
                </div>
                <div class="media-right">
                    <img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" class="media-object" style="width:60px">
                </div>
            </div>
        </div>
    </body>
</html>

 

OUTPUT

 

We can also align our media objects on top, bottom or at the middle, let’s see the classes we can use to do so,

We can use classes like media-top, media-bottom, or media-middle. The syntax is,

<div class="media-top">
    <img src="#">
</div>
<div class="media-body">
    Demo content
</div>

 

Below is an illustrative example of the discussed classes,

<!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>Coding Ninja Example</title>
    </head>
    <body>
        <div class="container">
            <h3>Media Object</h3>
            <br>
             
            <div class="media">
                <div class="media-top"> <img class="align-self-end mr-3" src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" style="width:80px"></div>
                <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">
                <div class="media-middle"> <img class="align-self-end mr-3" src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" style="width:80px"></div>
                <div class="media-body">
                    <h6 class="media-heading">Media Middle</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">
                <div class="media-bottom"> <img class="align-self-end mr-3" src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" style="width:80px"></div>
               
                <div class="media-body">
                    <h6 class="media-heading">Media Bottom</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>

 

OUTPUT

 

Nesting Media Objects

We can put our media objects one under the other using nesting of our media objects. We can use nested .media within our parent media object body class. 

Below is an example of how we can implement nesting of media objects,

<!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>coding Ninjas Example</title>
    </head>
    <body>
        <div class="container">
            <h3>Nested Media Objects - Bootstrap</h3>
            <br>
            <div class="media">
                <div class="media-left">
                    <img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" class="media-object" style="width:45px">
                </div>
             
                <div class="media-body">
                    <h6 class="media-heading">Coding Ninjas <small><br><i>Media Object 1</i></small></h6>
             
                    <!-- Nested media object -->
                    <div class="media">
                        <div class="media-left">
                            <img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" class="media-object" style="width:45px">
                        </div>
             
                        <div class="media-body">
                            <h6 class="media-heading">Coding Ninjas <small><br><i>Media Object 2</i></small></h6>
             
                            <!-- Nested media object -->
                            <div class="media">
                                <div class="media-left">
                                    <img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" class="media-object" style="width:45px">
                                </div>
             
                                <div class="media-body">
                                    <h6 class="media-heading">Coding Ninjas <small><br>
                                      <i>Media Object 3</i></small></h6>
                                </div>
                            </div>
                        </div>
                    </div>
             
                    <div class="media">
                        <div class="media-left">
                            <img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" class="media-object" style="width:45px">
                        </div>
             
                        <div class="media-body">
                            <h6 class="media-heading">Coding Ninjas <small><br><i>Media Object 4</i></small></h6>
                        </div>
                    </div>
                </div>
            </div>     
            <div class="media">
                <div class="media-left">
                    <img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" class="media-object"
                         style="width:45px">
                </div>
                <div class="media-body">
                    <h6 class="media-heading">Coding Ninjas <small><br><i>Media Object 5</i></small></h6>
                </div>
            </div>
        </div>
    </body>
</html>

 

OUTPUT

 

Frequently Asked Questions

  1. What are Media Objects?
    The Media Objects help us build complex and repetitive components to position the media alongside the content. 
     
  2. Name the classes you can use to align the media content to the left and right.
    To align our objects, we have three available classes,
    media-left: This class is used to left-align our media objects.
    media-right: This class is used to right-align our media objects.
    media-body: This class is used to place our content. 
     
  3. What all are the types of Media Objects?
    The media class allows us to float or place a media object which includes, pictures, audio, and videos, in a particular direction within the contents of a block.

Key Takeaways

Hey everyone, let's briefly describe an overview of the use of media objects provided by Bootstrap.

  • This article covers what media objects are and how one can use them in their programs.
  • We have further discussed the alignment of media objects - to the left, right, top, bottom, and middle using elaborative examples.
  • Further, we have seen how we can nest these components within each other using an example.


Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers. 

Happy Learning Ninjas!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think