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.
<!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 =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ 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:
Example 2: In this example, we set the cards in the horizontal direction and changed the border color.
<!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 =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ 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:
Example 3: In this example, we illustrate the cards header, footer, and background color using .card classes.
<!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 =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ 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:
Reference: https://getbootstrap.com/docs/5.0/components/card/#card-styles