Do you know the latest update of 2019? A overview of our is now available on YouTube

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 card-bordered">
        <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 card-bordered">
        <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 card-bordered">
        <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 card-bordered">
      <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
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 card-bordered">
        <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 card-bordered">
        <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>