is now part of Shuffle™. The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →
← all Bootstrap classes list

Bootstrap class: .card bg-... text-...

<!-- Tip: use bg-* and text-* utilities to style the card -->
<div class="card text-white bg-primary mb-3 d-inline-block" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Primary 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>
</div>
<div class="card text-white bg-dark mb-3 d-inline-block" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Primary 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>
</div>

Preview

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

More in Bootstrap Cards

Bootstrap 4 & 5