Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Cards are flexible and extensible content containers. They include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element, or slot into your grid columns. This is easily customized with our various sizing options.
Card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Go somewhere<div class="card" style="width: 280px">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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-solid theme-primary">Go somewhere</a>
</div>
</div>How it works
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.
-
Cards are built with flexbox, so they offer easy alignment via flexbox utilities and grid column classes.
-
Cards have no
marginby default, so use margin utilities as needed. -
Cards are broken down into three categories of sub-components: header, body, and footer. Headers and footers are optional while the body is required. Images can also serve as headers and footers.
-
Card and card body are both
flexcontainers, so content can be aligned and stretched as needed with utilities and whatever HTML you require. -
Cards can have nearly any content, including text, images, lists, and more.
Content types
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
Body
The building block of a card is the .card-body. Use it whenever you need a padded section within a card.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Titles, text, and links
Titles, text, and links within cards all have required class names for managing alignment. Size and color is up to you to manage.
- For a title, use
.card-title. - For a subtitle, use
.card-subtitle. This uses a negative margin to position itself closer to the title. - For text, use
.card-text. This removes block margins from the element.
Example card title
With a card subtitle
Some quick example text to build on the card title and make up the bulk of the card’s content.
Card link<div class="card" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Example card title</h4>
<h6 class="card-subtitle fg-3">With a card subtitle</h6>
<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="#">Card link</a>
</div>
</div>Images
Use .card-img-top and .card-img-bottom to round the top and bottom corners of the image.
Some quick example text to build on the card title and make up the bulk of the card’s content.
Some quick example text to build on the card title and make up the bulk of the card’s content.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<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>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>List groups
When your card only contains a list group—no header, footer, or body—simply use a .list-group if possible. Card borders are applied to individual card sub-components, so in this case, you‘ll have the list group’s default border.
- An item
- A second item
- A third item
<div class="card" style="width: 18rem;">
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>When combined with other card sub-components, use .card-list to manage borders and rounded corners.
- An item
- A second item
- A third item
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush card-list">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>- An item
- A second item
- A third item
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush card-list">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>Kitchen sink
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
Card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
- An item
- A second item
- A third item
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
</div>
<ul class="list-group list-group-flush card-list">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Header and footer
Add an optional header and/or footer within a card.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Card headers can be styled by adding .card-header to <h*> elements.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>A well-known quote, contained in a blockquote element.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-body-secondary">
2 days ago
</div>
</div>Width
Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
Grid
Using the grid, wrap cards in columns and rows as needed.
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Utilities
Use our handful of available sizing utilities to quickly set a card’s width.
<div class="card w-75 mb-3">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>Custom CSS
Use custom CSS in your stylesheets or as inline styles to set a width.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Navigation
Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<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" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>This works with .nav-pills as well.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Images
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Image caps
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>Image overlays
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
<div class="card text-bg-dark">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small>Last updated 3 mins ago</small></p>
</div>
</div>Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
Card row
Use the .card-row class to make a card horizontal. For image caps, use the .card-img-start or .card-img-end class to position the image at the (inline) start or end position of the card.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="card card-row" style="max-width: 540px;">
<img src="..." class="card-img-start" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>And with the reverse layout:
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="card card-row" style="max-width: 540px;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-end" alt="...">
</div>Theme variants
Customize cards by using our theme color utilities. By default, cards use bg for their background and border colors when applying a theme color. Use .card-subtle to swap the background and border colors for a more subtle look.
Card title
Card text…
Card title
Card text…
Card title
Card text…
Card title
Card text…
Card title
Card text…
Card title
Card text…
Card title
Card text…
Card title
Card text…
<div class="card card-primary">…</div>
<div class="card card-accent">…</div>
<div class="card card-success">…</div>
<div class="card card-danger">…</div>
<div class="card card-warning">…</div>
<div class="card card-info">…</div>
<div class="card card-inverse">…</div>
<div class="card card-secondary">…</div>Card title
Card text…
Card title
Card text…
Card title
Card text…
Card title
Card text…
Card title
Card text…
Card title
Card text…
Card title
Card text…
Card title
Card text…
<div class="card card-subtle theme-primary">…</div>
<div class="card card-subtle theme-accent">…</div>
<div class="card card-subtle theme-success">…</div>
<div class="card card-subtle theme-danger">…</div>
<div class="card card-subtle theme-warning">…</div>
<div class="card card-subtle theme-info">…</div>
<div class="card card-subtle theme-inverse">…</div>
<div class="card card-subtle theme-secondary">…</div>Card layout
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
Card groups
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>When using card groups with footers, their content will automatically line up.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>Grid cards
Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Change it to .row-cols-3 and you’ll see the fourth card wrap.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a short card.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Just like with card groups, card footers will automatically line up.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>Masonry
In v4 we used a CSS-only technique to mimic the behavior of Masonry-like columns, but this technique came with lots of unpleasant side effects. If you want to have this type of layout in v5, you can just make use of Masonry plugin. Masonry is not included in Bootstrap, but we’ve made a demo example to help you get started.
CSS
Variables
Cards use local CSS variables on .card for real-time customization.
Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--card-spacer-y: #{$card-spacer-y};
--card-spacer-x: #{$card-spacer-x};
--card-subtitle-color: #{$card-subtitle-color};
--card-border-width: #{$card-border-width};
--card-border-color: #{$card-border-color};
--card-border-radius: #{$card-border-radius};
--card-box-shadow: #{$card-box-shadow};
--card-inner-border-radius: #{$card-inner-border-radius};
--card-cap-padding-y: #{$card-cap-padding-y};
--card-cap-padding-x: #{$card-cap-padding-x};
--card-cap-bg: #{$card-cap-bg};
--card-cap-color: #{$card-cap-color};
--card-height: #{$card-height};
--card-color: #{$card-color};
--card-bg: #{$card-bg};
--card-img-overlay-padding: #{$card-img-overlay-padding};
--card-group-margin: #{$card-group-margin};
--card-body-gap: #{$card-body-gap};
Sass variables
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-subtitle-color: null;
$card-border-width: var(--border-width);
$card-border-color: var(--border-color-translucent);
$card-border-radius: var(--border-radius-lg);
$card-box-shadow: null;
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});
$card-cap-padding-y: $card-spacer-y * .75;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: var(--bg-1);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: var(--bg-body);
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;
$card-body-gap: $card-spacer-y * .5;