Scribd
Upload
36 views6 pages

Bootstrap 5 Cards

Cards in Bootstrap provide a flexible and extensible content container with multiple options and variations. Some key features of Bootstrap cards include: - Basic cards can be created with the .card class and content inside uses the .card-body class. Headers and footers can be added with .card-header and .card-footer. - Contextual color classes like .bg-primary add background colors to cards. - The .card-title, .card-text, and .card-link classes style headings, paragraphs and links within cards. - Images can be placed at the top or bottom of cards using .card-img-top and .card-img-bottom on an <img

Uploaded by

Bogdan Chindris
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
36 views6 pages

Bootstrap 5 Cards

Cards in Bootstrap provide a flexible and extensible content container with multiple options and variations. Some key features of Bootstrap cards include: - Basic cards can be created with the .card class and content inside uses the .card-body class. Headers and footers can be added with .card-header and .card-footer. - Contextual color classes like .bg-primary add background colors to cards. - The .card-title, .card-text, and .card-link classes style headings, paragraphs and links within cards. - Images can be placed at the top or bottom of cards using .card-img-top and .card-img-bottom on an <img

Uploaded by

Bogdan Chindris
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Bootstrap 5 

Cards
❮ PreviousNext ❯

Cards
A card in Bootstrap 5 is a bordered box with some padding around its content.
It includes options for headers, footers, content, colors, etc.
John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Basic Card
A basic card is created with the .card class, and content inside the card has
a .card-body class:

Basic card

Example
<div class="card">
  <div class="card-body">Basic card</div>
</div>

Try it Yourself »

Header and Footer


Header

Content

Footer

The .card-header class adds a heading to the card and the .card-footer class adds


a footer to the card:

Example
<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>
Try it Yourself »

Contextual Cards
To add a background color the card, use contextual classes (.bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Example
Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

Try it Yourself »
Titles, text, and links
Card title

Some example text. Some example text.

Card link Another link

Use .card-title to add card titles to any heading element. The .card-text class is


used to remove bottom margins for a <p> element if it is the last child (or the
only one) inside .card-body. The .card-link class adds a blue color to any link,
and a hover effect.

Example
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Try it Yourself »

Card Images
John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Jane Doe

Some example text some example text. Jane Doe is an architect and engineer

See Profile
Add .card-img-top or .card-img-bottom to an <img> to place the image at the top or
at the bottom inside the card. Note that we have added the image outside of
the .card-body to span the entire width:

Example
<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

Try it Yourself »

You might also like