Bootstrap 4 | Cards

A Bootstrap card is a flexible box containing some padding around the content. It includes the options for headers and footers, color, content, and powerful display options. It replaces the use of panels, wells, and thumbnails. It can be used in a single container called card.

Basic Card: The .card and .card-body classes are used to create basic card. The .card-body class is used inside the .card class.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="container">
        <div class="card">
            <div class="card-body">card-body</div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Header and Footer: The .card-header class provides header to the cards and .card-footer class provides footer to the cards.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="container">
        <div class="card">
            <div class="card-header">Card Header</div>
            <div class="card-body">Card Body</div>
            <div class="card-footer">Card Footer</div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Card Title and Links: The .card-title class is used to set a title to the card and .card-link class is used to set a link to the card if required in it.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="container">
        <div class="card">
            <div class="card-title">Card Title</div>
            <p class="card-text">Card Text.</p>
            <a href="#" class="card-link">Click Me!</div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Card Styles: Card styles can be set by using a color of the card so that it may be easy for the user to understand what does the particular card stands for. It consists of the colors used in the alerts.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="container">
        <div class="card text-white bg-primary">
            <div class="card-header">Primary</div>
            <h4 class="card-title">Title.</h4>
        </div>
        <br>
        <div class="card text-white bg-danger">
            <div class="card-header">Danger</div>
            <h4 class="card-title">Title.</h4>
        </div>
        <br>
        <div class="card text-white bg-warning">
            <div class="card-header">Warning</div>
            <h4 class="card-title">Title.</h4>
        </div>
        <br>
        <div class="card text-white bg-info">
            <div class="card-header">Info</div>
            <h4 class="card-title">Title.</h4>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Card Images: The .card-img-top or .card-img-bottom class is used to place the image at top or bottom inside the card.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
<div class="container">
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src=
                                alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Author Name</h5>
            <p class="card-text">Passionate about programming.</p>
            <a href="#" class="btn btn-primary">See Profile</a>
        </div>
    </div>
</div>
</body
  
</html>                    

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="container">
        <div class="card" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title">Author Name</h5>
                <p class="card-text">Passionate about programming.</p>
                <a href="#" class="btn btn-primary">See Profile</a>
                <img class="card-img-top" src=
                    alt="Card image cap">
            </div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Card Image Overlays: The .card-img-overlay class is used to add text on the top of the image.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="container">
        <div class="card" style="width: 18rem;">
            <img class="card-img-bottom" src=
                alt="Card image cap">
              
            <div class="card-img-overlay">
                <div class="card-body">
                    <h5 class="card-title">Author Name</h5>
                    <p class="card-text">Passionate about programming.</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Card Deck: The .card-deck class is used to create an equal height and width card grid.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="container">
        <div class="card-deck">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <h4 class="card-title">Primary</h4>
                </div>
            </div>
  
            <div class="card text-white bg-danger">
                <div class="card-body">
                    <h4 class="card-title">Danger</h4>
                </div>
            </div>
  
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <h4 class="card-title">Warning</h4>
                </div>
            </div>
  
            <div class="card text-white bg-info">
                <div class="card-body">
                    <h4 class="card-title">Info</h4>
                </div>
            </div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Card Group: The .card-group class is used to create equal height and width card grid and removing the left and right margins between the cards.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="container">
        <div class="card-group">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <h4 class="card-title">Primary</h4>
                </div>
            </div>
      
            <div class="card text-white bg-danger">
                <div class="card-body">
                    <h4 class="card-title">Danger</h4>
                </div>
            </div>
      
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <h4 class="card-title">Warning</h4>
                </div>
            </div>
      
            <div class="card text-white bg-info">
                <div class="card-body">
                    <h4 class="card-title">Info</h4>
                </div>
            </div>
        </div>
    </div>
</body
  
</html>                                       

chevron_right


Output:

List groups: The .list-group and .list-group-flush classes are used to create a list of contents in a card.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="container">
        <div class="card">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">List Item 1</li>
                <li class="list-group-item">List Item 2</li>
                <li class="list-group-item">List Item 3</li>
            </ul>
        </div>
    </div>
</body
  
</html>                              

chevron_right


Output:

Kitchen sink: It is a name given to the type of card which consists of everything in it. It mixes and matches multiple contents to make the desired card.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="container">
        <div class="card" style="width:12rem;">
            <img class="card-img-top" src=
            <div class="card-block">
                <h4 class="card-title">Languages</h4>
            </div>
              
            <ul class="list-group list-group-flush">
                <li class="list-group-item">C</li>
                <li class="list-group-item">C++</li>
                <li class="list-group-item">JavaScript</li>
            </ul>
              
            <div class="card-body">
                <a href="#" class="card-link">Add New</a>
                <a href="#" class="card-link">More..</a>
            </div>
        </div>
    </div>
</body
  
</html>                                     

chevron_right


Output:

Navigation: It adds the navigation menu to the card header.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#">JavaStript</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">BootStrap</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Python</a>
                </li>
            </ul>
        </div>
          
        <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Add more language tutorials.</p>
            <a href="#" class="btn btn-primary">Add Language</a>
        </div>
    </div>
</body
  
</html>                                   

chevron_right


Output:

Navigation menu in pills form: It adds the navigation menu in pills form to the card header.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Cards</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1
          
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-pills card-header-pills">
                <li class="nav-item">
                    <a class="nav-link active" href="#">JavaStript</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">BootStrap</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Python</a>
                </li>
            </ul>
        </div>
          
        <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Add more language tutorials.</p>
            <a href="#" class="btn btn-primary">Add Language</a>
        </div>
    </div>
</body
  
</html>                            

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.