Bootstrap Cards

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

Examples

img-blur-shadow
refresh
Cozy 5 Stars Apartment

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.

$899/night

place

Barcelona, Spain

<div class="card" data-animation="true">
  <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
    <a class="d-block blur-shadow-image">
      <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
    </a>
    <div class="colored-shadow" style="background-image: url(&quot;https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg&quot;);"></div>
  </div>
  <div class="card-body text-center">
    <div class="d-flex mt-n6 mx-auto">
      <a class="btn btn-link text-primary ms-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Refresh">
        <i class="material-symbols-rounded text-lg">refresh</i>
      </a>
      <button class="btn btn-link text-info me-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit">
        <i class="material-symbols-rounded text-lg">edit</i>
      </button>
    </div>
    <h5 class="font-weight-normal mt-3">
      <a href="javascript:;">Cozy 5 Stars Apartment</a>
    </h5>
    <p class="mb-0">
      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.
    </p>
  </div>
  <hr class="dark horizontal my-0">
  <div class="card-footer d-flex">
    <p class="font-weight-normal my-auto">$899/night</p>
    <i class="material-symbols-rounded position-relative ms-auto text-lg me-1 my-auto">place</i>
    <p class="text-sm my-auto"> Barcelona, Spain</p>
  </div>
</div>

Examples

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. 
<div class="card card-frame">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

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.

img-blur-shadow
refresh
Cozy 5 Stars Apartment

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.

$899/night

place

Barcelona, Spain

img-blur-shadow
refresh
Cozy 5 Stars Apartment

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.

$899/night

place

Barcelona, Spain

img-blur-shadow
refresh
Cozy 5 Stars Apartment

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.

$899/night

place

Barcelona, Spain

<div class="card-group">
  <div class="card" data-animation="true">
    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
      <a class="d-block blur-shadow-image">
        <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
      </a>
      <div class="colored-shadow" style="background-image: url(&quot;https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg&quot;);"></div>
    </div>
    <div class="card-body text-center">
      <div class="d-flex mt-n6 mx-auto">
        <a class="btn btn-link text-primary ms-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Refresh">
          <i class="material-symbols-rounded text-lg">refresh</i>
        </a>
        <button class="btn btn-link text-info me-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit">
          <i class="material-symbols-rounded text-lg">edit</i>
        </button>
      </div>
      <h5 class="font-weight-normal mt-3">
        <a href="javascript:;">Cozy 5 Stars Apartment</a>
      </h5>
      <p class="mb-0">
        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.
      </p>
    </div>
    <hr class="dark horizontal my-0">
    <div class="card-footer d-flex">
      <p class="font-weight-normal my-auto">$899/night</p>
      <i class="material-symbols-rounded position-relative ms-auto text-lg me-1 my-auto">place</i>
      <p class="text-sm my-auto"> Barcelona, Spain</p>
    </div>
  </div>
  <div class="card" data-animation="true">
    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
      <a class="d-block blur-shadow-image">
        <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
      </a>
      <div class="colored-shadow" style="background-image: url(&quot;https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg&quot;);"></div>
    </div>
    <div class="card-body text-center">
      <div class="d-flex mt-n6 mx-auto">
        <a class="btn btn-link text-primary ms-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Refresh">
          <i class="material-symbols-rounded text-lg">refresh</i>
        </a>
        <button class="btn btn-link text-info me-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit">
          <i class="material-symbols-rounded text-lg">edit</i>
        </button>
      </div>
      <h5 class="font-weight-normal mt-3">
        <a href="javascript:;">Cozy 5 Stars Apartment</a>
      </h5>
      <p class="mb-0">
        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.
      </p>
    </div>
    <hr class="dark horizontal my-0">
    <div class="card-footer d-flex">
      <p class="font-weight-normal my-auto">$899/night</p>
      <i class="material-symbols-rounded position-relative ms-auto text-lg me-1 my-auto">place</i>
      <p class="text-sm my-auto"> Barcelona, Spain</p>
    </div>
  </div>
  <div class="card" data-animation="true">
    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
      <a class="d-block blur-shadow-image">
        <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
      </a>
      <div class="colored-shadow" style="background-image: url(&quot;https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg&quot;);"></div>
    </div>
    <div class="card-body text-center">
      <div class="d-flex mt-n6 mx-auto">
        <a class="btn btn-link text-primary ms-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Refresh">
          <i class="material-symbols-rounded text-lg">refresh</i>
        </a>
        <button class="btn btn-link text-info me-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit">
          <i class="material-symbols-rounded text-lg">edit</i>
        </button>
      </div>
      <h5 class="font-weight-normal mt-3">
        <a href="javascript:;">Cozy 5 Stars Apartment</a>
      </h5>
      <p class="mb-0">
        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.
      </p>
    </div>
    <hr class="dark horizontal my-0">
    <div class="card-footer d-flex">
      <p class="font-weight-normal my-auto">$899/night</p>
      <i class="material-symbols-rounded position-relative ms-auto text-lg me-1 my-auto">place</i>
      <p class="text-sm my-auto"> Barcelona, Spain</p>
    </div>
  </div>
</div>d

Advanced examples

Full background Cards PRO


Some Kind Of Blues

Deftones

User #hashtag in a photo on social media and get $10 for each purchase you make.

Read More 
<div class="row my-4">
  <div class="col-md-6">
    <div class="card card-background card-background-mask-dark align-items-start mt-4">
        <div class="full-background cursor-pointer" style="background-image: url('https://images.unsplash.com/photo-1604213410393-89f141bb96b8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA5fHxuYXR1cmV8ZW58MHx8MHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60')"></div>
        <div class="card-body">
          <h5 class="text-white mb-0">Some Kind Of Blues</h5>
          <p class="text-white text-sm">Deftones</p>
          <div class="d-flex mt-4 pt-2">
            <button class="btn btn-outline-white rounded-circle p-2 mb-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Prev">
              <i class="material-symbols-rounded p-2">skip_previous</i>
            </button>
            <button class="btn btn-outline-white rounded-circle p-2 mx-2 mb-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Play">
              <i class="material-symbols-rounded p-2">play_arrow</i>
            </button>
            <button class="btn btn-outline-white rounded-circle p-2 mb-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Next">
              <i class="material-symbols-rounded p-2">skip_next</i>
            </button>
          </div>
        </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card text-center">
      <div class="overflow-hidden position-relative border-radius-lg bg-cover p-3" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/window-desk.jpg')">
        <span class="mask bg-gradient-dark opacity-6"></span>
        <div class="card-body position-relative z-index-1 d-flex flex-column mt-5">
          <p class="text-white font-weight-bolder">User #hashtag in a photo on social media and get $10 for each purchase you make.</p>
          <a class="text-white text-sm font-weight-bold mb-0 icon-move-right mt-4" href="javascript:;">
            Read More
            <i class="material-symbols-rounded text-sm ms-1 position-relative" aria-hidden="true">arrow_forward</i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Pricing cards PRO

Starter

$59/mo

done 2 team members
done 20GB Cloud storage
done Integration help
remove Sketch Files
remove API Access
remove Complete documentation
Join
Premium

$89/mo

done 10 team members
done 40GB Cloud storage
done Integration help
done Sketch Files
remove API Access
remove Complete documentation
Try Premium 
<div class="row">
  <div class="col-md-4 mb-4">
    <div class="card shadow-lg">
      <span class="badge rounded-pill bg-light text-dark w-30 mt-n2 mx-auto">Starter</span>
      <div class="card-header text-center pt-4 pb-3">
        <h1 class="font-weight-bold mt-2">
          <small class="text-lg mb-auto">$</small>59<small class="text-lg">/mo</small>
        </h1>
      </div>
      <div class="card-body text-lg-start text-center pt-0">
        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto">done</i>
          <span class="ps-3">2 team members</span>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto">done</i>
          <span class="ps-3">20GB Cloud storage </span>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto">done</i>
          <span class="ps-3">Integration help </span>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto">remove</i>
          <span class="ps-3">Sketch Files </span>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto">remove</i>
          <span class="ps-3">API Access </span>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto">remove</i>
          <span class="ps-3">Complete documentation </span>
        </div>

        <a href="javascript:;" class="btn btn-icon bg-gradient-dark d-lg-block mt-3 mb-0">
          Join
          <i class="fas fa-arrow-right ms-1"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-4">
    <div class="card bg-gradient-dark shadow-lg">
      <span class="badge rounded-pill bg-primary w-30 mt-n2 mx-auto">Premium</span>
      <div class="card-header text-center pt-4 pb-3 bg-transparent">
        <h1 class="font-weight-bold mt-2 text-white">
          <small class="text-lg mb-auto">$</small>89<small class="text-lg">/mo</small>
        </h1>
      </div>
      <div class="card-body text-lg-start text-center pt-0">
        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto text-white">done</i>
          <span class="ps-3 text-white">10 team members</span>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto text-white">done</i>
          <span class="ps-3 text-white">40GB Cloud storage </span>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto text-white">done</i>
          <span class="ps-3 text-white">Integration help </span>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto text-white">done</i>
          <span class="ps-3 text-white">Sketch Files </span>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto text-white">remove</i>
          <span class="ps-3 text-white">API Access </span>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <i class="material-symbols-rounded my-auto text-white">remove</i>
          <span class="ps-3 text-white">Complete documentation </span>
        </div>

        <a href="javascript:;" class="btn btn-icon bg-gradient-primary d-lg-block mt-3 mb-0">
          Try Premium
          <i class="fas fa-arrow-right ms-1"></i>
        </a>
      </div>
    </div>
  </div>
</div>

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 
<div class="card mt-4">
   <!-- Card image -->
   <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
     <img class="border-radius-lg w-100" src="https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" alt="Image placeholder">
     <!-- List group -->
     <ul class="list-group list-group-flush mt-2">
        <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>
   <!-- Card body -->
   <div class="card-body">
    <h4 class="font-weight-normal mt-3">Card title</h4>
    <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="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

Image PRO

img-blur-shadow
Siri brings hands-free TV to more devices

Siri's latest trick is offering a hands-free TV viewing experience, that will allow consumers to turn on or off their television, change inputs, fast forward, rewind and more, without having to first invoke a specific skill, or even press a button on their remote. 

<div class="card">
  <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
    <a class="d-block blur-shadow-image">
      <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
    </a>
    <div class="colored-shadow" style="background-image: url(&quot;https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg&quot;);"></div>
  </div>
  <div class="card-body px-4 pt-2">
    <a href="javascript:;">
      <h5 class="font-weight-normal mt-3">
        Siri brings hands-free TV to more devices
      </h5>
    </a>
    <p>
      Siri's latest trick is offering a hands-free TV viewing experience, that will allow consumers to turn on or off their television, change inputs, fast forward, rewind and more, without having to first invoke a specific skill, or even
      press a button on their remote.
    </p>
    <button type="button" class="btn bg-gradient-primary mt-3 mb-0">Read more</button>
  </div>
</div>

Blockquote PRO

Testimonial

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

Someone famous in Source Title
<div class="card bg-gradient-default">
  <div class="card-body">
    <h5 class="font-weight-normal text-info text-gradient">Testimonial</h5>
    <blockquote class="blockquote text-white mb-0">
      <p class="text-dark ms-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer text-gradient text-info text-sm ms-3">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Overlay PRO

Search and Discovery

Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards.

<div class="card card-background">
  <div class="full-background" style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80')"></div>
  <div class="card-body pt-12">
    <h4 class="text-white font-weight-normal">Search and Discovery</h4>
    <p>Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards.</p>
  </div>
</div>

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

Bootstrap Background Image

Card image 
<div class="card bg-dark text-white border-0">
    <img class="card-img" src="https://images.unsplash.com/photo-1560157368-946d9c8f7cb6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" alt="Card image">
</div>