Open In App

Bootstrap 5 Cards Horizontal

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

Bootstrap 5 Cards Horizontal is used to make the card horizontal so the image and content can be placed side by side. By default, the image, and the text content are stacked vertically and we have to change some settings to set them beside one another. To make it horizontal we have to use a grid class and have image and text content in columns in a row and reduce the grid gutters to zero. 

Prerequisite: Bootstrap 5 Card layouts, and Layout Gutters.

Bootstrap 5 Cards Horizontal classes:

  • col-md-*: This class is used to make the card horizontal at the md breakpoint.
  • g-0: This class is used to define the grid gutters as 0, so that there are no gap between the columns.

Note: * can take values from 0,1, 2, 3 and so on.

Syntax:

<div class="card">
  <div class="row g-0">
      <div class="col">
              <img src="..." alt="...">
      </div>
      <div class="col-md-*">
              <div class="card-body">
                 ....
              </div>
       </div>
  </div>
</div>

Example 1: This example below demonstrates the Horizontal Cards in action and a couple of them beside each other.

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 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap5 Cards Horizontal
    </h4>
    <div class="container d-flex mt-4 p-4">
        <div class="card mb-3" style="max-width:540px;">
            <div class="row g-0">
                <div class="col-md-6">
                    <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 class="card mb-3" style="max-width:540px;">
            <div class="row g-0">
                <div class="col-md-6">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.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">
                            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>
</body>
</html>
 






                        










Output:


Bootstrap 5 Cards Horizontal
Bootstrap 5 Cards Horizontal


Example 2: The code below demonstrates how we can add a card 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 text-success">GeeksforGeeks</h1> 


    <h4 class="ms-4">Bootstrap 5 Cards Horizontal</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="card mb-3" style="max-width: 540px;"> 


                                <div class="row g-0"> 


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


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


                    <div class="modal-footer"> 


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


                            data-bs-dismiss="modal"> 


                            Ok, I Got it! 


                        </button> 


                    </div> 


                </div> 


            </div> 


        </div> 


    </div>   


</body> 


</html>



















                        







                        










Output:


Bootstrap 5 Cards Horizontal
Bootstrap 5 Cards Horizontal


Reference: https://getbootstrap.com/docs/5.0/components/card/#horizontal 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Cards Image Caps
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Card styles
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                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
            

        
    
        
            

                Bootstrap 5 Cards Sizing
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        priyanshuchatterjee01                                

                            

                            

            
                                

                            

                                                                    

                                        
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