Open In App

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

Last Updated : 22 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
        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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"
                    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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"
                    alt="GeeksforGeeks" class="media-object" 
                     height="100px" width="100px" />
            </div>
        </li>
    </ul>
  
    <!-- Bootstrap jQuery link -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
        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= 


"https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"


        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= 


"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"


                    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= 


"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"


                        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= 


"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"


                        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= 


"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"


                    alt="GeeksforGeeks" class="media-object"


                    height="100px" width="100px" /> 


            </div> 


        </li> 


    </ul> 


  


    <!-- Bootstrap jQuery link -->


    <script src= 


"https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"


        integrity= 


"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"


        crossorigin="anonymous"> 


    </script> 


      


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"


        integrity= 


"sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"


        crossorigin="anonymous"> 


    </script> 


</body> 


  


</html>



















                        







                        










Output:




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        What is the use of the modal Class in Bootstrap?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Media Objects in Bootstrap with Examples
            

        
    
        
            

                Bootstrap | Media queries
            

        
    
        
            

                Bootstrap 4 | Media Objects
            

        
    
        
            

                Explain media object and their types in Bootstrap
            

        
    
        
            

                How to write the bootstrap media queries for very large screens ?
            

        
    
        
            

                What is media object and explain there types in Bootstrap ?
            

        
    
        
            

                Bootstrap 5 Flex Media object
            

        
    
        
            

                Bootstrap 5 Breakpoints Media queries
            

        
    
        
            

                How to use Tooltip on Social Media Icons in Bootstrap 5 ?
            

        
    
        
            

                React-Bootstrap Media Component
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        abhisheksainiaggarwal                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox