Open In App

Bootstrap 5 Grid Cards

Last Updated : 11 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Grid Cards is a way to have a grid of cards put beside one another and they completely act like a grid. It is created by using the row-cols and col classes and the row-col classes are responsive, so we can specify how many cards will be there in a row in any specified screen size.

Bootstrap 5 Grid cards Classes:

  • row-cols-[sm/md/lg/xl]-[0-9]: This class is used to specify the row of the card grid. In this class, the screen size is optional but the number is compulsory.

Syntax:

<div class="row row-cols-[0-9]">
      <div class="col">
        <div class="card">
              <!-- Card Contents --!>
        </div>
      </div>
  ...
</div>

Example 1: The code below demonstrates how we can add responsive row-col classes in the card grid.

HTML




<!doctype html>
<html lang="en">
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
 
<body>
    <h1 class="m-4" class="text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">Bootstrap 5 Grid Cards</h4>
    <div class="container m-4">
        <div class="row row-cols-1 row-cols-md-2
                    row-cols-lg-3 g-4">
            <div class="col">
                <div class="card mb-3" style="max-width: 540px;">
                    <div class="row g-0">
                        <div class="col-md-6 text-center">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                                class="img-fluid rounded-start"
                                alt="...">
                        </div>
                        <div class="col-md-6">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Data Structures
                                </h5>
                                <p class="card-text">
    A data structure is a storage that is used to store and organize data.
                                </p>
                                <p class="card-text">
                                    <small class="text-muted">
                                        Last updated now
                                    </small>
                                </p>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card mb-3" style="max-width: 540px;">
                    <div class="row g-0">
                        <div class="col-md-6 text-center">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                                class="img-fluid rounded-start"
                                alt="...">
                        </div>
                        <div class="col-md-6">
                            <div class="card-body">
                                <h5 class="card-title">Algorithms</h5>
                                <p class="card-text">
    Therefore Algorithm refers to a sequence of finite steps to solve a particular problem.
                                </p>
                                <p class="card-text">
                                    <small class="text-muted">
                                        Last updated now
                                    </small>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card mb-3" style="max-width: 540px;">
                    <div class="row g-0">
                        <div class="col-md-6 text-center">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                                class="img-fluid rounded-start"
                                alt="...">
                        </div>
                        <div class="col-md-6">
                            <div class="card-body">
                                <h5 class="card-title">C++</h5>
                                <p class="card-text">
                                    C++ is a general-purpose programming language
                                    and is widely used nowadays for competitive programming.
                                </p>
                                <p class="card-text">
                                    <small class="text-muted">
                                        Last updated now
                                    </small>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card mb-3" style="max-width:540px;">
                    <div class="row g-0">
                        <div class="col-md-6 text-center">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                                class="img-fluid rounded-start"
                                alt="...">
                        </div>
                        <div class="col-md-6">
                            <div class="card-body">
                                <h5 class="card-title">Java</h5>
                                <p class="card-text">
                                    Java is one of the most popular and widely
                                    used programming languages.
                                </p>
                                <p class="card-text">
                                    <small class="text-muted">
                                        Last updated now
                                    </small>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card mb-3" style="max-width:540px;">
                    <div class="row g-0">
                        <div class="col-md-6 text-center">
                          <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                            class="img-fluid rounded-start" alt="...">
                        </div>
                        <div class="col-md-6">
                            <div class="card-body">
                                <h5 class="card-title">Python</h5>
                                <p class="card-text">
                                    Python is a high-level, general-purpose
                                    and a very popular programming language.</p>
                                <p class="card-text">
                                    <small class="text-muted">
                                        Last updated now
                                    </small>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
 






                        










Output:


Bootstrap 5 Grid cards
Bootstrap 5 Grid cards


Example 2: The code below demonstrates how we can add grid cards in a modal:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!doctype html>


<html lang="en">


 


<head>


     <link href=


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


        rel="stylesheet" integrity=


"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"


        crossorigin="anonymous">


    <script src=


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


            integrity=


"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"


            crossorigin="anonymous">


    </script>


</head>


 


<body>


    <h1 class="m-4" class="text-success">


        GeeksforGeeks


    </h1>


    <h4 class="ms-4">Bootstrap 5 Grid Cards</h4>


    <div class="container">


        <button type="button" class="btn btn-success mt-4"


            data-bs-toggle="modal" data-bs-target="#cardModal">


            Launch Modal


        </button>


        <div class="modal fade" id="cardModal" tabindex="-1"


                aria-labelledby="cardModalLabel" aria-hidden="true">


            <div class="modal-dialog">


                <div class="modal-content">


                    <div class="modal-header">


                        <h5 class="modal-title" id="cardModalLabel">


                            This Modal Contains a Card</h5>


                        <button type="button" class="btn-close"


                            data-bs-dismiss="modal" aria-label="Close">


                        </button>


                    </div>


                    <div class="modal-body">


                        <div class="container d-flex mt-4 p-4">


                            <div class="row row-cols-1 g-1">


                                <div class="col">


                                    <div class="card mb-3"


                                    style="max-width:540px;">


                                        <div class="row g-0">


                                            <div class="col-md-6 text-center">


                                                <img src=


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"


                                                    class="img-fluid rounded-start"


                                                     alt="...">


                                            </div>


                                            <div class="col-md-6">


                                                <div class="card-body">


                                                    <h5 class="card-title">


                                                        Data Structures                                                    


                                                    </h5>


                                                    <p class="card-text">


                                                        A data structure is a storage that 


                                                        is used to store and organize data.


                                                    </p>


                                                    <p class="card-text">


                                                        <small class="text-muted">


                                                        Last updated now</small>


                                                    </p>


                                                </div>


                                            </div>


                                        </div>


                                    </div>


                                </div>


                                <div class="col">


                                    <div class="card mb-3"


                                        style="max-width:540px;">


                                        <div class="row g-0">


                                            <div class="col-md-6 text-center">


                                                <img src=


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"


                                                    class="img-fluid rounded-start"


                                                     alt="...">


                                            </div>


                                            <div class="col-md-6">


                                                <div class="card-body">


                                                    <h5 class="card-title">


                                                        Algorithms


                                                    </h5>


                                                    <p class="card-text">


                                                        Therefore Algorithm refers to a 


                                                        sequence of finite steps to solve 


                                                        a particular problem. 


                                                    </p>


                                                    <p class="card-text">


                                                        <small class="text-muted">


                                                            Last updated now


                                                        </small>


                                                    </p>


                                                </div>


                                            </div>


                                        </div><!-- row g-0 -->


                                    </div><!-- card mb-3-->


                                </div><!-- col-->


                            </div><! -- row -->


                        </div><!--container -->


                        <div class="modal-footer">


                            <button type="button"


                                class="btn btn-danger"


                                data-bs-dismiss="modal">


                                Ok, I Got it!


                            </button>


                        </div>    <!-- modal footer div -->


                    </div> <!-- modal-body -->


                </div><!-- modal content -->


            </div> <!-- modal-dialog -->


        </div> <!-- id cardModal -->       


    </div><!-- container -->


</body>


</html>



















                        







                        










Output:


Bootstrap 5 Grid cards
Bootstrap 5 Grid cards


Reference: https://getbootstrap.com/docs/5.0/components/card/#grid-cards 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Cards Layout
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Cards Masonry
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Grid system Grid tiers
            

        
    
        
            

                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
            

        
    
        
            

                Bootstrap 5 Cards Kitchen sink
            

        
    
        
            

                Bootstrap 5 Cards Body
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
T

        

            
        

        

                                    


                                    

                                        triashabiswas                                

                            

                            

            
                                

                            

                                                                    

                                        
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