Skip to content
Related Articles

Related Articles

What is the purpose of .media-list class in bootstrap ?

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Mar, 2022

In this article, we will learn the use of the ‘.media-list’ class in Bootstrap. The .media-list class is one of the media object classes of bootstrap. The ‘.media’ class is used to align or float the media items like audio, video, and images, While the ‘.media-list’ class, is used when the media items are to be shown in the form of an unordered list. You can use the media classes inside the list items to align them according to the requirement.

Syntax:

<ul class="media-list">
    <li></li>
<ul>

Here’s the list of some common useful media classes you can use inside list items:

  • .media: You can create a media container using this class.
  • .media-body: Use this class to display the text or content.
  • .media-left: This class is used to align the media to the left.
  • .media-right: This class is used to align the media to the right.
  • .media-heading: This class contains the heading of the media container.
  • .media-object: This class contains the media type (can be audio, video, or an image).

Example 1: The examples below demonstrate the use of the ‘.media-list’ class in bootstrap:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
  
    <!-- Bootstrap cdn to link the bootstrap with HTML document -->
    <link rel="stylesheet" href=
        integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" 
          crossorigin="anonymous" />
  
    <title>Explain the use of.media-list class in Bootstrap</title>
    <style>
        .media2 {
            /* margin-bottom: 5px; */
            width: 60vw;
            height: 50vh;
            display: flex;
            background-color: green;
            color: white;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
  
<body>
    <ul class="media-list media2">
        <li class="media">
            <div class="media-left">
                <img src=
                    alt="GeeksforGeeks" class="media-object" 
                     height="100px" width="100px" />
            </div>
  
            <div class="media-body">
                <h2 class="media-heading">
                    Welcome to GeeksforGeeks
                </h2>
                <p>
                    A Computer Science portal for all geeks. <br>
                    This is left aligned item.
                </p>
            </div>
        </li>
  
        <li class="media">
            <div class="media-body">
                <h2 class="media-heading">
                    Welcome to GeeksforGeeks
                </h2>
                <p>
                    A Computer Science portal for all geeks. <br>
                    This is right aligned item.
                </p>
            </div>
            <div class="media-right">
                <img src=
                    alt="GeeksforGeeks" class="media-object" 
                     height="100px" width="100px" />
            </div>
        </li>
    </ul>
  
    <!-- Bootstrap jQuery link -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
        crossorigin="anonymous"></script>
</body>
  
</html>

Output:

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <!-- Bootstrap cdn to link the 
        bootstrap with HTML document -->
    <link rel="stylesheet" href=
        integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" 
        crossorigin="anonymous" />
  
    <title>
        Explain the use of.media-list 
        class in Bootstrap
    </title>
      
    <style>
        .media2 {
            width: 60vw;
            height: 80vh;
            display: flex;
            background-color: green;
            color: white;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
  
<body>
    <ul class="media-list media2">
        <li class="media">
            <div class="media-left">
                <img src=
                    alt="GeeksforGeeks" class="media-object" 
                    height="100px" width="100px" />
            </div>
  
            <div class="media-body">
                <h2 class="media-heading">
                    Hey Geek, Welcome to GeeksforGeeks
                </h2>
                  
                <p>
                    A computer science portal for all geeks. 
                    <br>This is parent, left aligned item.
                </p>
            </div>
        </li>
  
        <ul class="media-list">
            <li class="media">
                <div class="media-body">
                    <h2 class="media-heading">
                        Hey Geek, Welcome to GeeksforGeeks
                    </h2>
                    <p>
                        A computer science portal for all geeks.
                        <br>This is child, right aligned item.
                    </p>
                </div>
                <div class="media-right">
                    <img src=
                        alt="GeeksforGeeks" class="media-object"
                        height="100px" width="100px" />
                </div>
            </li>
        </ul>
  
        <ul class="media-list">
            <li class="media">
                <div class="media-left">
                    <img src=
                        alt="GeeksforGeeks" class="media-object"
                        height="100px" width="100px" />
                </div>
  
                <div class="media-body">
                    <h2 class="media-heading">
                        Hey Geek, Welcome to GeeksforGeeks
                    </h2>
                    <p>
                        A computer science portal for all geeks.
                        <br>This is child, left aligned item.
                    </p>
                </div>
            </li>
        </ul>
  
        <li class="media">
            <div class="media-body">
                <h2 class="media-heading">
                    Hey Geek, Welcome to GeeksforGeeks
                </h2>
                <p>
                    A computer science portal for all geeks.
                    <br>This is parent, right aligned item.
                </p>
            </div>
            <div class="media-right">
                <img src=
                    alt="GeeksforGeeks" class="media-object"
                    height="100px" width="100px" />
            </div>
        </li>
    </ul>
  
    <!-- Bootstrap jQuery link -->
    <script src=
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
        crossorigin="anonymous">
    </script>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!