Bootstrap Cards

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

Examples

Now UI Design System

One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That"s pretty impressive.

More about us

<div class="card">
  <img class="card-img-top" src="https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/bg28.jpg">
  <div class="card-body">
    <h4>Now UI Design System</h4>
    <p>
      One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That&#34;s pretty impressive.
    </p>
    <a href="javascript:;" class="text-primary text-decoration-underline-hover">More about us</a>
  </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.

Now UI Design System

One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That"s pretty impressive.

More about us

Now UI Design System

One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That"s pretty impressive.

More about us

Now UI Design System

One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That"s pretty impressive.

More about us

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/bg28.jpg">
    <div class="card-body">
      <h4>Now UI Design System</h4>
      <p>
        One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That&#34;s pretty impressive.
      </p>
      <a href="javascript:;" class="text-primary text-decoration-underline-hover">More about us</a>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/bg28.jpg">
    <div class="card-body">
      <h4>Now UI Design System</h4>
      <p>
        One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That&#34;s pretty impressive.
      </p>
      <a href="javascript:;" class="text-primary text-decoration-underline-hover">More about us</a>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/bg28.jpg">
    <div class="card-body">
      <h4>Now UI Design System</h4>
      <p>
        One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That&#34;s pretty impressive.
      </p>
      <a href="javascript:;" class="text-primary text-decoration-underline-hover">More about us</a>
    </div>
  </div>
</div>

Advanced examples

Blog Cards PRO

Rover raised $65 million for pet sitting

Finding temporary housing for your dog should be as easy as renting an Airbnb. That’s the idea behind Rover, which raised $65 million to expand its pet sitting and dog-walking businesses.. Read More

Katie Roof

Home Office

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

<div class="row">
  <div class="col-md-12">
    <div class="card card-plain card-blog mt-5">
        <div class="row">
          <div class="col-md-4">
            <div class="card-image position-relative border-radius-lg">
              <img class="img border-radius-lg" src="https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/card-blog10.jpg">
            </div>
          </div>
          <div class="col-md-7 my-auto ms-md-3 mt-md-auto mt-4">
            <h3>
              <a href="javascript:;" class="text-dark font-weight-normal">Rover raised $65 million for pet sitting</a>
            </h3>
            <p>
              Finding temporary housing for your dog should be as easy as renting an Airbnb. That’s the idea behind Rover, which raised $65 million to expand its pet sitting and dog-walking businesses.. <a href="javascript:;" class="text-dark text-decoration-underline-hover"> Read More </a>
            </p>
    				<div class="author">
    				   <img src="https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/emily.jpg" alt="..." class="avatar avatar-sm shadow rounded-circle me-2">
    				   <p class="my-auto">Katie Roof</p>
    				</div>
          </div>
        </div>
      </div>
  </div>
  <div class="col-md-5 mt-3">
    <a href="javascript:;">
      <div class="card card-background mb-4">
        <div class="full-background" style="background-image: url(https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/bg26.jpg)"></div>
        <div class="card-body pt-12">
          <h4 class="text-white text-decoration-underline-hover">Home Office</h4>
          <p>Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards.</p>
        </div>
      </div>
    </a>
  </div>
</div>

Profile Cards PRO

Hattie McKenzie

Montreal, QC

323

Projects

500+

Hours

24/7

Support

Olivia Harper

@oliviaharper

The connections you make at Web Summit are unparalleled, we met users all over the world.

<div class="row my-4">
  <div class="col-md-6">
    <div class="card card-profile">
      <a href="javascript:;">
        <img class="w-100 border-radius-md border-radius-bottom-end-0 border-radius-bottom-start-0" src="https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/emily.jpg">
      </a>
      <div class="card-body justify-content-center text-center">
        <h4 class="mb-0">Hattie McKenzie</h4>
        <p>Montreal, QC</p>
        <div class="row justify-content-center text-center">
          <div class="col-lg-4 col-4">
            <h5 class="text-info mb-0">323</h5>
            <small>Projects</small>
          </div>
          <div class="col-lg-4 col-4">
            <h5 class="text-info mb-0">500+</h5>
            <small>Hours</small>
          </div>
          <div class="col-lg-4 col-4">
            <h5 class="text-info mb-0">24/7</h5>
            <small>Support</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
  <div class="card">
    <div class="text-center mt-n5 z-index-1">
      <div class="position-relative">
        <img class="avatar avatar-xxl shadow-lg rounded-circle" src="https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/emily.jpg" alt="avatar">
      </div>
    </div>
    <div class="card-body text-center pb-0">
      <h4 class="mb-0">Olivia Harper</h4>
      <p>@oliviaharper</p>
      <p class="mt-2">
        The connections you make at Web Summit are unparalleled, we met users all over the world.
      </p>
    </div>
    <div class="card-footer text-center pt-2">
      <div class="mx-auto">
        <svg class="opacity-2" width="60px" height="60px" viewBox="0 0 270 270" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>quote-down</title>
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M107.000381,49.033238 C111.792099,48.01429 115.761022,48.6892564 116.625294,50.9407629 C117.72393,53.8028077 113.174473,58.3219079 107.017635,60.982801 C107.011653,60.9853863 107.00567,60.9879683 106.999688,60.990547 C106.939902,61.0219589 106.879913,61.0439426 106.820031,61.0659514 C106.355389,61.2618887 105.888177,61.4371549 105.421944,61.5929594 C88.3985192,68.1467602 80.3242628,76.9161885 70.3525495,90.6906738 C60.0774843,104.884196 54.9399518,119.643717 54.9399518,134.969238 C54.9399518,138.278158 55.4624127,140.716309 56.5073346,142.283691 C57.2039492,143.328613 57.9876406,143.851074 58.8584088,143.851074 C59.7291771,143.851074 61.0353294,143.241536 62.7768659,142.022461 C68.3497825,138.016927 75.4030052,136.01416 83.9365338,136.01416 C93.8632916,136.01416 102.658051,140.063232 110.320811,148.161377 C117.983572,156.259521 121.814952,165.88151 121.814952,177.027344 C121.814952,188.695638 117.417572,198.970703 108.622813,207.852539 C99.828054,216.734375 89.1611432,221.175293 76.6220807,221.175293 C61.9931745,221.175293 49.3670351,215.166992 38.7436627,203.150391 C28.1202903,191.133789 22.8086041,175.024577 22.8086041,154.822754 C22.8086041,131.312012 30.0359804,110.239421 44.490733,91.6049805 C58.2196377,73.906272 74.3541002,59.8074126 102.443135,50.4450748 C102.615406,50.3748509 102.790055,50.3058192 102.966282,50.2381719 C104.199241,49.7648833 105.420135,49.3936487 106.596148,49.1227802 L107,49 Z M233.000381,49.033238 C237.792099,48.01429 241.761022,48.6892564 242.625294,50.9407629 C243.72393,53.8028077 239.174473,58.3219079 233.017635,60.982801 C233.011653,60.9853863 233.00567,60.9879683 232.999688,60.990547 C232.939902,61.0219589 232.879913,61.0439426 232.820031,61.0659514 C232.355389,61.2618887 231.888177,61.4371549 231.421944,61.5929594 C214.398519,68.1467602 206.324263,76.9161885 196.352549,90.6906738 C186.077484,104.884196 180.939952,119.643717 180.939952,134.969238 C180.939952,138.278158 181.462413,140.716309 182.507335,142.283691 C183.203949,143.328613 183.987641,143.851074 184.858409,143.851074 C185.729177,143.851074 187.035329,143.241536 188.776866,142.022461 C194.349783,138.016927 201.403005,136.01416 209.936534,136.01416 C219.863292,136.01416 228.658051,140.063232 236.320811,148.161377 C243.983572,156.259521 247.814952,165.88151 247.814952,177.027344 C247.814952,188.695638 243.417572,198.970703 234.622813,207.852539 C225.828054,216.734375 215.161143,221.175293 202.622081,221.175293 C187.993174,221.175293 175.367035,215.166992 164.743663,203.150391 C154.12029,191.133789 148.808604,175.024577 148.808604,154.822754 C148.808604,131.312012 156.03598,110.239421 170.490733,91.6049805 C184.219638,73.906272 200.3541,59.8074126 228.443135,50.4450748 C228.615406,50.3748509 228.790055,50.3058192 228.966282,50.2381719 C230.199241,49.7648833 231.420135,49.3936487 232.596148,49.1227802 L233,49 Z" fill="#48484A" fill-rule="nonzero" transform="translate(135.311778, 134.872794) scale(-1, -1) translate(-135.311778, -134.872794) "></path>
          </g>
        </svg>
      </div>
    </div>
  </div>
  </div>
</div>

Full background Cards PRO

Last visits in US

Wealth creation is an evolutionarily recent positive-sum game. Status is an old zero-sum game. Those attacking wealth creation are often just seeking status.

<div class="row">
  <div class="col-md-6">
    <a href="javascript:;">
      <div class="card card-background">
        <div class="full-background" style="background-image: url('https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/project9.jpg')"></div>
        <div class="card-body pt-12">
          <h4 class="text-white text-decoration-underline-hover">Last visits in US</h4>
          <p>Wealth creation is an evolutionarily recent positive-sum game. Status is an old zero-sum game. Those attacking wealth creation are often just seeking status.</p>
        </div>
      </div>
    </a>
  </div>
</div>

Pricing card PRO

Premium

Free access for 200 members

$499 / year

Buy now

Complete documentation

Working materials in Sketch

20GB cloud storage

100 team members

<div class="row">
  <div class="col-md-6 mb-4">
    <div class="card shadow-none bg-gradient-dark h-100 overflow-hidden">
      <div class="card-header bg-transparent text-sm-start text-center pt-4 pb-3 px-4">
        <h5 class="mb-1 text-white">Premium</h5>
        <p class="mb-3 text-sm text-white">Free access for 200 members</p>
        <h3 class="font-weight-bold mt-3 text-white">
          $499 <small class="text-sm text-secondary font-weight-bold">/ year</small>
        </h3>
        <a href="javascript:;" class="btn  shadow-none btn-white w-100 rounded-pill mt-4 mb-2">Buy now</a>
      </div>
      <hr class="horizontal light my-0">
      <div class="card-body">
        <div class="d-flex pb-3">
          <div>
            <i class="fas fa-check text-success text-sm"></i>
          </div>
          <div class="ps-3">
            <span class="text-sm text-white">Complete documentation</span>
          </div>
        </div>

        <div class="d-flex pb-3">
          <div>
            <i class="fas fa-check text-success text-sm"></i>
          </div>
          <div class="ps-3">
            <span class="text-sm text-white">Working materials in Sketch</span>
          </div>
        </div>

        <div class="d-flex pb-3">
          <div>
            <i class="fas fa-check text-success text-sm"></i>
          </div>
          <div class="ps-3">
            <span class="text-sm text-white">20GB cloud storage</span>
          </div>
        </div>

        <div class="d-flex pb-3">
          <div>
            <i class="fas fa-check text-success text-sm"></i>
          </div>
          <div class="ps-3">
            <span class="text-sm text-white">100 team members</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

List group PRO

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">
   <!-- Card image -->
   <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
     <img class="border-radius-lg w-100" src="https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/bg6.jpg" 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">
    <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="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

Image PRO

Enterprise

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 card-blog card-plain">
  <div class="position-relative">
    <a class="d-block blur-shadow-image">
      <img src="https://images.unsplash.com/photo-1593642634402-b0eb5e2eebc9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1920&amp;q=80" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
    </a>
  </div>
  <div class="card-body px-0 pt-4">
    <p class="text-gradient text-primary text-gradient font-weight-bold text-sm text-uppercase">Enterprise</p>
    <a href="javascript:;">
      <h4>
        Siri brings hands-free TV to more devices
      </h4>
    </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">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">
    <h3 class="card-title text-info text-gradient">Testimonial</h3>
    <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 move-on-hover">
  <div class="full-background" style="background-image: url('https://images.unsplash.com/photo-1541451378359-acdede43fdf4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=934&amp;q=80')"></div>
  <div class="card-body pt-12">
    <h4 class="text-white">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

<div class="card bg-dark text-white border-0">
    <img class="card-img" src="https://demos.creative-tim.com/now-ui-design-system-pro/assets/img/bg6.jpg" alt="Card image">
</div>