Bootstrap card is a container with bordered box provides some padding inside elements. This card contains background colors, headers, footers and some other display options.
In this bootstrap tutorial example we will learn how to create a Cards with Bootstrap5. To create a cards inside html with bootstrap5 we need to add .card class
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Card Example</title> </head> <body > <div class = "container"> <h2>Card 1</h2> <div class = "card"> <div class = "card-body"> <h5 class = "card-title">RRTutors</h5> <p class = "card-text"> Simple bootstrap5 card example, to create card add .card class for the div, it will add all card properties to the assigned div. </p> <a href="#" class = "btn btn-primary">More Info</a> </div> </div> <h2>Card 2</h2> <div class = "card"> <div class = "card-body"> <h5 class = "card-title">RRTutors</h5> <p class = "card-text"> Simple bootstrap5 card example, to create card add .card class for the div, it will add all card properties to the assigned div. </p> <a href="#" class = "btn btn-primary">More Info</a> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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> </body> </html> |
Output: This will give below out put as screen
 |
Create Bootstrap5 Card with header and footer properties
We can create card by adding headers and footers to the card. To do this we need to use card-footer and card-header .
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Card Example</title> </head> <body > <div class = "container"> <h2>Card with header and footer</h2> <div class = "card"> <div class = "card-header">Card Header</div> <div class = "card-body"> <h5 class = "card-title">RRTutors</h5> <p class = "card-text"> Simple bootstrap5 card example, to create card add .card class for the div. Card with header and Footer classes it will add all card properties to the assigned div. </p> <a href="#" class = "btn btn-primary">More Info</a> </div> <div class = "card-footer">Card Footer</div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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> </body> </html> |
 |
Create Card with image
Card has one more property like card-img-top to display images
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Card Example</title> </head> <body > <div class = "container"> <p></p> <div class="card" style="width: 18rem;"> <img src="https://rrtutors.com/uploads/langpostimg/bootstrap-logo.JPG" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <p></p> <div class="card" style="width: 18rem;"> <img src="https://rrtutors.com/uploads/langpostimg/bootstrap-logo.JPG" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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> </body> </html> |
Output:
 |
Card with Image Overlay
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Card Example</title> </head> <body > <div class = "container"> <p></p> <div class="card" style="width: 18rem;"> <img src="https://i.pinimg.com/736x/41/fe/f9/41fef9da02fc87708bc69ced725877be.jpg" class="card-img-top" alt="..."> <div class = "card-img-overlay"> <p class = "card-text text-white"> HTML stands for Hypertext Markup Language. It is the most widely used language to write Web Pages </p> <a href = "#" class = "btn btn-primary">More Info</a> </div> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">View Image</a> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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> </body> </html> |
Output:
 |
Card with ListGroup
How do we make group of cards with bootstrap5
<div class = "container"> <div class="card" style="width: 18rem;"> <div class="card-header"> Bootstrap </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Bootstrap5</li> <li class="list-group-item">Bootstrap4</li> <li class="list-group-item">Bootstrap3</li> </ul> </div> </div> |
Card with Navigation Tab
We can create card with nav tab by adding the classes nav-tabs and nav-pills
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Card Example</title> </head> <body > <div class = "container"> <h2>Navigation Tab</h2> <div class = "card text-center" style="width: 58rem;"> <div class = "card-header"> <ul class = "nav nav-tabs card-header-tabs"> <li class = "nav-item"> <a class = "nav-link active" href = "#">HTML</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">CSS</a> </li> <li class = "nav-item"> <a class = "nav-link " href = "#">Bootstrap</a> </li> </ul> </div> <div class = "card-body"> <h5 class = "card-title">Title</h5> <p class = "card-text">Content goes here...</p> </div> </div> <br> <h2>Navigation Pill</h2> <div class = "card text-center " style="width: 58rem;"> <div class = "card-header"> <ul class = "nav nav-pills card-header-pills"> <li class = "nav-item"> <a class = "nav-link active" href = "#">HTML</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">CSS</a> </li> <li class = "nav-item"> <a class = "nav-link " href = "#">Bootstrap</a> </li> </ul> </div> <div class = "card-body"> <h5 class = "card-title">Title</h5> <p class = "card-text">Content goes here...</p> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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> </body> </html> |
 |
Conclusion: In this bootstrap5 tutorial we created different types of cards like simple cars, card with header and footer, bootstrap5 card with image overlay, card navigation.
|
Article Contributed By :
|
|
|
|
|
509 Views |
|