Open In App

Bootstrap 5 Cards Masonry

Last Updated : 15 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Cards Masonry is a grid layout that uses space optimization and displays cards in the most space-efficient way and also looks beautiful. Mansory is not included with bootstrap so we have to include the Mansory javascript plugin in our document using the CDN link provided below.

Bootstrap 5 Cards Masonry Attributes:

  • data-mansory: This attribute is used to define the Masonry options. Here we will set it to {“percentPosition”: true }.

Masonry CDN Link:

<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async></script>

Syntax:

<div data-masonry='{"percentPosition": true }'>
    <div class="col">
        ...
    </div>
</div>

Example 1: This example illustrates how to create a card Mansory having two columns.

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">
    <title>GeeksforGeeks - Bootstrap 5</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
    <!-- Mansory JS -->
    <script src=
"https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async>
    </script>
</head>
  
<body>
    <div class="container">
        <div class="mt-5 mb-4">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <strong>
                Bootstrap 5 Cards Mansory
            </strong>
        </div>
  
        <div class="row mb-5" 
             data-masonry='{"percentPosition": true }'>
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        GeeksforGeeks is a computer science portal
                        for geeks. It offers courses in various
                        computer science subjects like Data Structures
                        and Algorithms, Database Management Systems, etc.
                    </div>
                </div>
  
                <div class="card mt-4">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221204185234/download.png"
                         class="card-img-top" />
                    <div class="card-body">
                        This is a card with the image on the top
                    </div>
                </div>
            </div>
  
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <p>Click the button below to explore the courses.</p>
                        <a href="https://www.geeksforgeeks.org/courses" 
                           class="btn btn-success">
                            Explore
                        </a>
                    </div>
                </div>
  
                <div class="card border-success mt-4">
                    <div class="card-body">
                        <p>GeeksforGeeks was founded by Sandeep
                            Jain in 2009 as he wanter to provide
                            computer science students a portal where
                            they can gain knowledge and prepare for big 
                            tech interviews.
                        </p>
                        <a href="https://www.geeksforgeeks.org/courses" 
                           class="btn btn-success">
                            Explore courses
                        </a>
                    </div>
                </div>
  
                <div class="card mt-4">
                    <div class="card-body">
                        <figure>
                            <blockquote class="blockquote">
                                <p>
                                    The more you know, the more you 
                                    realize you know nothing.
                                </p>
                            </blockquote>
                            <figcaption class="blockquote-footer">
                                Socrates
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
 






                        










Output:


 


Example 2: In this example, we created the cards Mansory having three columns of equal width.




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


    <title>GeeksforGeeks - Bootstrap 5</title> 


    <link rel="stylesheet" href= 


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


    <!-- Mansory JS -->


    <script src= 


"https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async> 


    </script> 


</head> 


  


<body> 


    <div class="container"> 


        <div class="mt-5 mb-4"> 


            <h1 class="text-success"> 


                GeeksforGeeks 


            </h1> 


            <strong>Bootstrap 5 Cards Mansory</strong> 


        </div> 


  


        <div class="row mb-5" 


             data-masonry='{"percentPosition": true }'> 


  


            <div class="col-4"> 


                <div class="card"> 


                    <div class="card-body"> 


                        <figure> 


                            <blockquote class="blockquote"> 


                                <p> 


                                    The more you know, the more  


                                    you realize you know nothing. 


                                </p> 


                            </blockquote> 


                            <figcaption class="blockquote-footer"> 


                                Socrates 


                            </figcaption> 


                        </figure> 


                    </div> 


                </div> 


  


                <div class="card mt-4 text-bg-danger"> 


                    <div class="card-body"> 


                        <figure> 


                            <blockquote class="blockquote"> 


                                <p> 


                                    If people never did silly things,  


                                    nothing intelligent would ever get  


                                    done. 


                                </p> 


                            </blockquote> 


                            <figcaption class="blockquote-footer text-light"> 


                                Ludwig Wittgenstein 


                            </figcaption> 


                        </figure> 


                    </div> 


                </div> 


  


                <div class="card mt-4"> 


                    <div class="card-header"> 


                        <h3>What GeeksforGeeks Offers?</h3> 


                    </div> 


                    <div class="card-body"> 


                        Free Tutorials, Millions of Articles, 


                        Live, Online and Classroom Courses, 


                        Frequent Coding Competitions, Webinars by 


                        Industry Experts, Internship opportunities 


                        and Job Opportunities. 


                    </div> 


                </div> 


  


            </div> 


            <div class="col-4"> 


                <div class="card"> 


                    <div class="card-body"> 


                        GeeksforGeeks is a computer science portal 


                        for geeks. It offers courses in various 


                        computer science subjects like Data Structures 


                        and Algorithms, Database Management Systems, etc. 


                    </div> 


                </div> 


  


                <div class="card mt-4 text-bg-success"> 


                    <div class="card-header"> 


                        <h3>Why GeeksforGeeks?</h3> 


                    </div> 


                    <div class="card-body"> 


                        <ul> 


                            <li>Online Courses</li> 


                            <li>Classroom Courses</li> 


                            <li>Free Tutorials and Articles</li> 


                            <li>Write Articlesand Earn</li> 


                            <li>Internship opportunities</li> 


                            <li>Job Portal</li> 


                            <li>Practice Portal</li> 


                        </ul> 


                    </div> 


                </div> 


  


                <div class="card mt-4"> 


                    <div class="card-body"> 


                        <p>Click the button below to explore the courses.</p> 


                        <a href="https://www.geeksforgeeks.org/courses" 


                           class="btn btn-success"> 


                            Explore 


                        </a> 


                    </div> 


                </div> 


            </div> 


  


            <div class="col-4"> 


                <div class="card border-success"> 


                    <div class="card-body"> 


                        <p>GeeksforGeeks was founded by Sandeep 


                            Jain in 2009 as he wanter to provide 


                            computer science students a portal where 


                            they can gain knowledge and prepare for  


                            big tech interviews. 


                        </p> 


                        <a href="https://www.geeksforgeeks.org/courses" 


                           class="btn btn-success"> 


                            Explore courses 


                        </a> 


                    </div> 


                </div> 


  


                <div class="card mt-4"> 


                    <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20221204185234/download.png"


                        class="card-img-top" /> 


                    <div class="card-body"> 


                        This is a card with the image on the top 


                    </div> 


                </div> 


            </div> 


        </div> 


    </div> 


</body> 


</html>



















                        







                        










Output:


 


Reference: https://getbootstrap.com/docs/5.2/components/card/#masonry


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Grid Cards
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Cards SASS
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Can I Create Masonry Layout using Tailwind CSS Utility Classes ?
            

        
    
        
            

                CSS Only Masonry Layouts
            

        
    
        
            

                React MUI Masonry API
            

        
    
        
            

                Bootstrap | Cards
            

        
    
        
            

                Bootstrap 4 | Cards
            

        
    
        
            

                How to place two bootstrap cards next to each other ?
            

        
    
        
            

                React-Bootstrap Cards Component
            

        
    
        
            

                Bootstrap 5 Cards Titles, text, and links
            

        
    
        
            

                Bootstrap 5 Cards Sizing using custom CSS
            

        
    
        
            

                Bootstrap 5 Cards Sizing using Utilities
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
B

        

            
        

        

                                    


                                    

                                        badalmishra28                                

                            

                            

            
                                

                            

                                                                    

                                        
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