logo logo-dark
Components

Card Boxed

Cards provide a flexible and extensible content container with multiple variants and options.

Basic Examples

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.

Card with stretched link

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

Go somewhere
Code Example
<div class="card">
    <img src="..." class="card-img-top" alt="">
    <div class="card-inner">
        <h5 class="card-title">Card with stretched link</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>

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag.
In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Card title
Card subtitle

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

Card link Another link
Code Example
<div class="card">
    <div class="card-inner">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2">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="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

List groups

Create lists of content in a card with a flush list group.

Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Code Example
<!-- With Header -->
<div class="card">
    <div class="card-header border-bottom">Featured</div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
</div>
<!-- No Header -->
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Header and footer

Add an optional header and/or footer within a card.

Featured Title
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago
Featured Title
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Code Example
<!-- With Footer Header -->
<div class="card">
    <div class="card-header border-bottom">Featured Title</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 class="card-footer border-top text-muted">2 days ago</div>
</div>

<!-- With Only Header -->
<div class="card">
    <div class="card-header border-bottom">Featured Title</div>
    <div class="card-inner">
        <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>

Card Styles

Cards include various options for customizing their backgrounds, borders, and color.

Use colors utilities to change the appearance of a card.

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
Secondary card title

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

Header
Dark card title

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

Header
Light card title

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

Code Example
<div class="card text-white bg-primary">
    <div class="card-header">Header</div>
    <div class="card-inner">
        <h5 class="card-title">Primary 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>
    </div>
</div>
© 2020 DashLite. Template by Softnio