## Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Cards on Bootstrap

#### Basic Example

    <div class="card" style="max-width:20rem;">
      <img class="card-img-top" src="../../assets/img/generic/66.jpg" alt="..." />
      <div class="card-body">
        <h5 class="card-title">Title goes here</h5>
        <p class="card-text">Here is the example of the Multiple Container Sortable feature of the </p>
        <button class="btn btn-primary">Go somewhere</button>
      </div>
    </div>

##### Title goes here

Here is the example of the Multiple Container Sortable feature of the

#### Card with list

    <div class="card p-3" style="max-width:20rem;">
      <a class="dropdown-item fw-bold text-warning" href="#!">
        <span class="fas fa-crown me-1"></span>
        <span>Go Pro</span>
      </a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#!">Set status</a>
      <a class="dropdown-item" href="#!">Profile &amp; account</a>
      <a class="dropdown-item" href="#!">Feedback</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#!">Settings</a>
      <a class="dropdown-item" href="#!">Logout</a>
    </div>

Go Pro
Set status Profile & account Feedback
Settings Logout

#### Image overlays

    <div class="card text-white overflow-hidden" style="max-width:30rem;">
      <img class="card-img-top" src="../../assets/img/generic/46.png" alt="..." />
      <div class="card-img-overlay d-flex align-items-end">
        <div>
          <h4 class="card-title text-white">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>
    </div>

#### 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.

#### Horizontal

    <div class="card" style="max-width:32rem;">
      <div class="row g-0">
        <div class="col-md-4">
          <img class="img-fluid h-100 rounded-start" src="../../assets/img/generic/36.png" alt="..." />
        </div>
        <div class="col-md-8">
          <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-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>

#### 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 Groups

    <div class="card-group">
      <div class="card">
        <img class="card-img-top" src="../../assets/img/generic/54.png" alt="..." />
        <div class="card-body">
          <h4 class="card-title">First 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-muted">Last updated 45 mins ago</small>
          </p>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top" src="../../assets/img/generic/44.png" alt="..." />
        <div class="card-body">
          <h4 class="card-title">First 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-muted">Last updated 45 mins ago</small>
          </p>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top" src="../../assets/img/generic/46.png" alt="..." />
        <div class="card-body">
          <h4 class="card-title">First 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-muted">Last updated 45 mins ago</small>
          </p>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top" src="../../assets/img/generic/45.png" alt="..." />
        <div class="card-body">
          <h4 class="card-title">First card title</h4>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in 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-muted">Last updated 45 mins ago</small>
          </p>
        </div>
      </div>
    </div>

#### First 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 45 mins ago

#### First 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 45 mins ago

#### First 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 45 mins ago

#### First card title

This is a wider card with supporting text below as a natural lead-in a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 45 mins ago

#### Card Background Styles

    <div class="row g-4">
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card text-white bg-primary">
          <div class="card-body">
            <h4 class="card-title text-white">Primary Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card text-white bg-secondary">
          <div class="card-body">
            <h4 class="card-title text-white">Secondary Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card text-white bg-success">
          <div class="card-body">
            <h4 class="card-title text-white">Success Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card text-white bg-danger">
          <div class="card-body">
            <h4 class="card-title text-white">Danger Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card text-white bg-warning">
          <div class="card-body">
            <h4 class="card-title text-white">Warning Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card text-white bg-info">
          <div class="card-body">
            <h4 class="card-title text-white">Info Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card text-dark bg-light">
          <div class="card-body">
            <h4 class="card-title text-dark">Light Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card text-white bg-dark">
          <div class="card-body">
            <h4 class="card-title text-white">Dark Card </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>
    </div>

#### Primary Card

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

#### Secondary Card

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

#### Success Card

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

#### Danger Card

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

#### Warning Card

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

#### Info Card

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

#### Light Card

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

#### Dark Card

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

#### Card Border Styles

    <div class="row g-4">
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border border-primary">
          <div class="card-body">
            <h4 class="card-title">Primary Border Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border border-secondary">
          <div class="card-body">
            <h4 class="card-title">Secondary Border Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border border-success">
          <div class="card-body">
            <h4 class="card-title">Success Border Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border border-danger">
          <div class="card-body">
            <h4 class="card-title">Danger Border Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border border-warning">
          <div class="card-body">
            <h4 class="card-title">Warning Border Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border border-info">
          <div class="card-body">
            <h4 class="card-title">Info Border Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border border-light">
          <div class="card-body">
            <h4 class="card-title">Light Border Card </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>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border border-dark">
          <div class="card-body">
            <h4 class="card-title">Dark Border Card </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>
    </div>

#### Primary Border Card

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

#### Secondary Border Card

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

#### Success Border Card

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

#### Danger Border Card

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

#### Warning Border Card

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

#### Info Border Card

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

#### Light Border Card

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

#### Dark Border Card

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

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize