Media Objects in Bootstrap with Examples

Posted By Bajarangi soft , Posted On 10-10-2020

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:

<!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>Bajarangi soft 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="logo.jpg" 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="logo.jpg" class="media-object" style="width:60px">
        </div>
    </div>
</div>
</body>
</html>

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 Top ,middle and Bottom alignment:

<!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>bajarangi Bootstrap Example</title>
</head>
<body>
<div class="container">
    <h3>Media Object</h3>
    <br>

    <div class="media">
        <img class="align-self-start mr-3" src="logo.jpg" 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="logo.jpg" 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="logo.jpg" 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>

Related Post

Containers In Bootstrap With Examples
How To Remove Margin Introduced In Pre Tag In Bootstrap 4
Borders In Bootstrap With Examples
Different Colors Of Borders And Styles In Bootstrap
Media Objects in Bootstrap with Examples
Dart Generate Random Number Using Flutter Android App
Media Objects In Nested Format Using Bootstrap
Create Floating Action Button Using Flutter Android
How To Align Header With Wrapper In Bootstrap 4