Open In App

Media Objects in Bootstrap with Examples

Last Updated : 28 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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

The Below program illustrates the left and right alignment:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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=
                    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=
                class="media-object" style="width:60px">
            </div>
        </div>
    </div>
</body>
</html>


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:

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        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=
                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=
                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=
                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>


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:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        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=
                    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=
                            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=
                                    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>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Link BootStrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        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=
                    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=
                            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=
                                    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=
                            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=
                    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>


Output:

Supported Browser:

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


Previous Article
Next Article

Similar Reads

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 pla
4 min read
Angular MDBootstrap Media Objects Layout
MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make attractive webpages with its seamless and easy-to-use component. In this article, we will know how to use Media Objects Layout in Angular MDBootstap. The Media Objects Layout is used to build complex &amp; highly repetitive components, that facilitates addi
3 min read
What is the difference between Host objects and Native objects ?
In this article, we will learn about what are Host objects and Native objects, and their differences. JavaScript objects are broadly classified into 2 categories - native javascript objects and host javascript objects. Native objects: Native javascript objects are standard javascript objects which are provided by javascript itself. They are also kn
2 min read
How to Separate Array of Objects into Multiple Objects in JavaScript ?
In JavaScript, the task of separating an array of objects into multiple objects involves organizing and restructuring data based on specific criteria or properties. This process is often necessary when dealing with datasets that need to be grouped or segmented for easier analysis or manipulation. There are various methods to achieve this separation
4 min read
How to Remove Multiple Objects from Nested Array of Objects in JavaScript ?
A nested array of objects is an array of arrays that contain multiple objects as their elements. Removing multiple objects from the nested array of objects in JavaSript can be accomplished in different ways as listed below: Table of Content Using filter() with some() methodUsing filter() with includes() methodUsing filter( ) with findIndex() method
5 min read
How to Convert Array of Objects into Unique Array of Objects in JavaScript ?
Arrays of objects are a common data structure in JavaScript, often used to store and manipulate collections of related data. However, there are scenarios where you may need to convert an array of objects into a unique array, removing any duplicate objects based on specific criteria. JavaScript has various methods to convert an array of objects into
5 min read
Extract unique objects by attribute from array of objects
Given an array of objects and the task is to return the unique object by the attribute. Examples: Input: [ { name: 'Geeks', id: 10 }, { name: 'GeeksForGeeks', id: 10 }, { name: 'Geeks', id: 20 }, { name: 'Geeks', id: 10 } ]Output:[ { name: 'Geeks', id: 10 }, { name: 'GeeksForGeeks', id: 10 } ]Approach: Let's assume that name is an attribute that di
4 min read
Filter Array of Objects with Another Array of Objects in JavaScript
Filtering an array of objects with another array in JavaScript involves comparing and including objects based on specific criteria. Below are the approaches to filter an array of objects with another array of objects in JavaScript: Table of Content Using filter and includes MethodsUsing LoopingUsing filter and includes MethodsIn this approach, we a
2 min read
How to Update an Array of Objects with Another Array of Objects using Lodash?
Updating an array of objects with another array of objects involves merging or updating objects in the first array with corresponding objects from the second array. Below are the approaches to update an array of objects with another array of objects in the Lodash library: Table of Content Using _.merge function from lodashUsing _.mergeWith function
2 min read
How to Remove Null Objects from Nested Array of objects in JavaScript ?
Removing null objects from the nested array of objects can be done by iterating over the array, filtering out the null objects at each level, and then applying a recursive approach to remove all the null objects. This makes sure that all the levels of the nested structure are checked and the null objects are removed. There are various approaches to
4 min read