Open In App

Bootstrap 5 Card styles

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

A card is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc. Cards include their own variant classes for quickly changing the background color and border color of a card.

Bootstrap 5 Card styles:

  • Background and color: The background-color sets the background color of an element. It can manipulate the colors of the text as well as the background with ease. Example: bg-primary, bg-danger.
  • Borders: Border used to quickly style the width, and color of the border and border-radius of an element.
  • Mixins utilities: In this property, we include the card header and footer with the border and background colors. we can also change the color of the text.

Syntax:

<div class="row">
    <div class="card text-white" style="max-width: ...rem;">
        <div class="card-header">....</div>
        <div class="card-body">
            <h5 class="card-title">....</h5>
            <p class="card-text">...</p>
        </div>
    </div>
</div>

Example 1: In this example, we set the background and color of the card, using background classes.

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>Bootstrap 5-GeeksforGeeks </title>
  
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">    
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
  
<body class="m-3">
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 Card styles</h5>
    </div>
    <div class="row border p-5 bg-light">
        <div class="card text-white bg-info" 
            style="max-width: 15rem;">
            <div class="card-header">GeeksforGeeks</div>
            <div class="card-body">
                <h5 class="card-title">Info card</h5>
                <p class="card-text">
                    A Computer Science Portal.Geeksforgeeks
                    is a platform for learning tech related
                    topics.
                </p>
            </div>
        </div>
        <div class="card text-white bg-danger ms-2" 
            style="max-width:15rem;">
            <div class="card-header">GeeksforGeeks</div>
            <div class="card-body">
                <h5 class="card-title">Danger card </h5>
                <p class="card-text">
                    A Computer Science Portal.Geeksforgeeks 
                    is a platform for learning tech related
                    topics.
                </p>
            </div>
        </div>
        <div class="card text-white bg-success ms-2" 
            style="max-width: 15rem;">
            <div class="card-header">GeeksforGeeks</div>
            <div class="card-body">
                <h5 class="card-title">Success card</h5>
                <p class="card-text">
                    A Computer Science Portal.
                    Geeksforgeeks is a platform 
                    for learning tech related
                    topics.
                </p>
            </div>
        </div>
    </div>
</body>
</html>
 






                        










Output:


Bootstrap 5 Card styles
Bootstrap 5 Card styles


Example 2: In this example, we set the cards in the horizontal direction and changed the border color.




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


   <link href= 


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


        rel="stylesheet"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">     


    </script> 


    <script src= 


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


    </script> 


</head> 


  


<body class="m-4"> 


    <div class="container text-center "> 


        <h1 class="text-success">GeeksforGeeks</h1> 


        <h5>Bootstrap 5 Card styles</h5> 


    </div> 


    <div class="row border p-5 bg-light"> 


        <div class="card border-secondary" 


            style="max-width: 17rem;"> 


            <div class="card-header">Write GeeksforGeeks</div> 


            <div class="card-body text-secondary"> 


                <h5 class="card-title"> 


                    Secondary card Border</h5> 


                <p class="card-text"> 


                    Geeks for Geeks have online as well as  


                    offline courses for on-demand topics like 


                    C++. 


                </p> 


            </div>                    


        </div> 


        <div class="card border-warning ms-3" 


            style="max-width:17rem;"> 


            <div class="card-header">Write GeeksforGeeks</div> 


            <div class="card-body text-warning"> 


                <h5 class="card-title">Warning card border</h5> 


                <p class="card-text"> 


                    Geeks for Geeks have online as well  


                    as offline courses for on-demand topics like 


                    C++. 


                </p> 


            </div> 


        </div> 


        <div class="card border-dark ms-3" 


            style="max-width:17rem;"> 


            <div class="card-header">  


                Write Geeksforgeeks</div> 


            <div class="card-body text-dark"> 


                <h5 class="card-title">Dark card Border</h5> 


                <p class="card-text"> 


                    Geeks for Geeks have online as well  


                    as offline courses for on-demand topics like 


                    C++. 


                </p> 


            </div> 


        </div> 


        <div class="card border-danger ms-3" 


            style="max-width:17rem;"> 


            <div class="card-header"> 


                Write GeeksforGeeks</div> 


            <div class="card-body text-danger"> 


                <h5 class="card-title">Danger card Border</h5> 


                <p class="card-text"> 


                    Geeks for Geeks have online as well as 


                    offline courses for on-demand topics like 


                    C++. 


                </p> 


            </div> 


        </div> 


    </div> 


</body> 


</html>



















                        







                        










Output:


Bootstrap 5 Card styles
Bootstrap 5 Card styles


Example 3: In this example, we illustrate the cards header, footer, and background color using .card classes.




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


  


    <link href= 


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


          rel="stylesheet"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">     


    </script> 


    <script src= 


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


    </script> 


</head> 


  


<body class="m-4"> 


    <div class="container text-center "> 


        <h1 class="text-success"> 


            GeeksforGeeks</h1> 


        <h5>Bootstrap 5 Card styles</h5> 


    </div> 


    <div class="row border p-5 bg-light text-center"> 


        <div class="card border-warning" style="max-width:15rem;"> 


            <div class="card-header text-bg-primary border-info"> 


                GeeksforGeeks 


            </div> 


            <div class="card-body text-danger"> 


                <p class="card-text"> 


                    Learn Data Structures and Algorithms  


                    Online at Your Own Pace with GeeksforGeeks DSA 


                    Course. 


                </p> 


                <button type="button" 


                    class="btn btn-success"> 


                    Sign In 


                </button> 


            </div> 


            <div class="card-footer text-bg-secondary  


                border-danger"> 


                Practice Geeks for Geeks 


            </div> 


        </div> 


        <div class="card border-primary ms-4" 


            style="max-width:15rem;"> 


            <div class="card-header bg-light border-info"> 


                About GeeksforGeeks 


            </div> 


            <div class="card-body text-primary"> 


                <p class="card-text"> 


                    Geeks for Geeks is a computer science portal 


                </p> 


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


                    Done 


                </button> 


            </div> 


            <div class="card-footer text-bg-success 


                border-primary"> 


                Home Geeks for Geeks 


            </div> 


        </div> 


    </div> 


</body> 


</html>



















                        







                        










Output:


Bootstrap 5 Card styles
Bootstrap 5 Card styles


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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Cards Horizontal
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Cards Border
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to add custom styles and ways to add custom styles in Tailwind-CSS ?
            

        
    
        
            

                How to Display a Card within a Card using Bootstrap ?
            

        
    
        
            

                How to use SASS to create new set of color styles in Bootstrap 4 ?
            

        
    
        
            

                Bootstrap 5 Validation Custom styles
            

        
    
        
            

                Bootstrap 5 Button group Outlined styles
            

        
    
        
            

                Bootstrap 5 Button group Mixed styles
            

        
    
        
            

                Bootstrap 5 Checks and Radios Outlined Styles
            

        
    
        
            

                How to add custom styles to React Bootstrap components?
            

        
    
        
            

                How to Customize Button Styles in Bootstrap ?
            

        
    
        
            

                Semantic-UI Card Variations Fluid Card Variant
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
B

        

            
        

        

                                    


                                    

                                        bulbultomar                                

                            

                            

            
                                

                            

                                                                    

                                        
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