Bootstrap Cards

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

Cards Headers Type

The header of the cards start with the plain .card-header, then you can add other types of headers based on what you want to show like: .card-header-icon or .card-header-text.

Regular header

Category subtitle

The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...

Full header coloured

Category subtitle

The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
language

Here is the Icon

The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...

Here is the Text

The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
Copy
<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Regular header</h4>
        <p class="category">Category subtitle</p>
      </div>
      <div class="card-body">
        The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card">
      <div class="card-header card-header-danger">
        <h4 class="card-title">Full header coloured</h4>
        <p class="category">Category subtitle</p>
      </div>
      <div class="card-body">
        The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header card-header-icon card-header-rose">
        <div class="card-icon">
          <i class="material-icons">language</i>
        </div>
      </div>
      <div class="card-body">
        <h4 class="card-title">Here is the Icon</h4>
        The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card">
      <div class="card-header card-header-text card-header-primary">
        <div class="card-text">
          <h4 class="card-title">Here is the Text</h4>
        </div>
      </div>
      <div class="card-body">
        The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
      </div>
    </div>
  </div>
</div>

Examples

Card image cap
Card title

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

Go somewhere
Copy
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">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>
    <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Stats card

equalizer

Website Visits

75.521

local_offer Tracked from Google Analytics
Copy
<div style="width: 18rem;">
  <div class="card card-stats">
    <div class="card-header card-header-primary card-header-icon">
      <div class="card-icon">
        <i class="material-icons">equalizer</i>
      </div>
      <p class="card-category">Website Visits</p>
      <h3 class="card-title">75.521</h3>
    </div>
    <div class="card-footer">
      <div class="stats">
        <i class="material-icons">local_offer</i> Tracked from Google Analytics
      </div>
    </div>
  </div>
</div>

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

This is some text within a card body.
Copy
<div class="card card-frame">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Cards with Animation PRO

We’ve created some special cards that can have actions under the header, you can activate those cards but adding the property data-header-animation="true". Info: After 20x hovers of one of these cards you can break it :-)

To stop the break effect you can go to assets/js/material-dashboard.js and find the variable breakCards = true and set it to false.

JFMAMJJASOND02004006008001000

Website Views

Last Campaign Performance

access_time campaign sent 2 days ago
Copy
<div class="row">
  <div class="col-md-6 mx-auto">
    <div class="card card-chart">
      <div class="card-header card-header-rose" data-header-animation="true">
        <div class="ct-chart" id="websiteViewsChart"></div>
      </div>
      <div class="card-body">
        <div class="card-actions">
          <button type="button" class="btn btn-danger btn-link fix-broken-card">
            <i class="material-icons">build</i> Fix Header!
          </button>

          <button type="button" class="btn btn-info btn-link" rel="tooltip" data-placement="bottom" title="Refresh">
            <i class="material-icons">refresh</i>
          </button>
          <button type="button" class="btn btn-default btn-link" rel="tooltip" data-placement="bottom" title="Change Date">
            <i class="material-icons">edit</i>
          </button>
        </div>
        <h4 class="card-title">Website Views</h4>
        <p class="card-category">Last Campaign Performance</p>
      </div>
      <div class="card-footer">
        <div class="stats">
          <i class="material-icons">access_time</i> campaign sent 2 days ago
        </div>
      </div>
    </div>
  </div>
</div>

Card Chart

MTWTFSS01020304050

Daily Sales

55% increase in today sales.

access_time updated 4 minutes ago
12p3p6p9p12p3a6a9a02004006008001000

Completed Tasks

Last Campaign Performance

access_time updated 2 minutes ago
Copy
<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header card-chart card-header-warning">
        <div class="ct-chart" id="dailySalesChart"></div>
      </div>
      <div class="card-body">
        <h4 class="card-title">Daily Sales</h4>
        <p class="card-category"><span class="text-success"><i class="fa fa-long-arrow-up"></i> 55%  </span> increase in today sales.</p>
      </div>
      <div class="card-footer">
        <div class="stats">
          <i class="material-icons">access_time</i> updated 4 minutes ago
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
  <div class="card">
    <div class="card-header card-chart card-header-success">
      <div class="ct-chart" id="completedTasksChart"></div>
    </div>
    <div class="card-body">
      <h4 class="card-title">Completed Tasks</h4>
      <p class="card-category">Last Campaign Performance</p>
    </div>
    <div class="card-footer">
      <div class="stats">
        <i class="material-icons">access_time</i> updated 2 minutes ago
      </div>
    </div>
  </div>
  </div>
</div>

// INFO: #dailySalesChart is initialised inside assets/js/material-dashboard.js on method initDocumentationCharts()

Layouts

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 PRO

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Card image cap
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 image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap
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

Copy
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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 class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Card decks PRO

Card image cap
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 image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap
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

Copy
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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 class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Card columns PRO

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Card image cap
Card title that wraps to a new line

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

Copy
<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Advanced Examples

List group PRO

Image placeholder
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere
Copy
<div class="card">
   <!-- Card image -->
   <img class="card-img-top" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Image placeholder">
   <!-- List group -->
   <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>
   <!-- Card body -->
   <div class="card-body">
      <h3 class="card-title mb-3">Card title</h3>
      <p class="card-text mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.</p>
      <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

Panel

In Bootstrap 4, panels are dropped entirely for the new card component and are created with the .card class, and content inside the panel has a .card-body class.

Bootstrap 4 Panel changes

  • .panel to .card, now built with flexbox.
  • .panel-default removed and no replacement.
  • .panel-group removed and no replacement. .card-group is not a replacement, it is different.
  • .panel-heading to .card-header
  • .panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
  • .panel-body to .card-body
  • .panel-footer to .card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger have been dropped for .bg-, .text-, and .border utilities generated from our $theme-colors Sass map.

Background Image

Card image
Copy
<div class="card bg-dark text-white border-0">
  <img class="card-img" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image">
</div>

Pricing Card PRO

business

$69

This is good if your company size is between 11 and 99 Persons.

Choose Plan
Copy
<div class="row">
  <div class="col-md-4 ml-auto mr-auto">
    <div class="card card-pricing bg-primary"><div class="card-body ">
      <div class="card-icon">
        <i class="material-icons">business</i>
      </div>
      <h3 class="card-title">$69</h3>
      <p class="card-description">
        This is good if your company size is between 11 and 99 Persons.
      </p>
      <a href="javascript:;" class="btn btn-white btn-round">Choose Plan</a>
      </div>
    </div>
  </div>
</div>