Bootstrap Cards

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

Examples

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.

Mathew Glock

Posted on 28 February

<div class="card">
  <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
    <a href="javascript:;" class="d-block">
      <img src="./assets/img/kit/pro/anastasia.jpg" class="img-fluid border-radius-lg">
    </a>
  </div>

  <div class="card-body pt-2">
    <span class="text-gradient text-primary text-uppercase text-xs font-weight-bold my-2">House</span>
    <a href="javascript:;" class="card-title h5 d-block text-darker">
      Shared Coworking
    </a>
    <p class="card-description mb-4">
      Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.
    </p>
    <div class="author align-items-center">
      <img src="./assets/img/kit/pro/team-2.jpg" alt="..." class="avatar shadow">
      <div class="name ps-3">
        <span>Mathew Glock</span>
        <div class="stats">
          <small>Posted on 28 February</small>
        </div>
      </div>
    </div>
  </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.

House Shared Coworking

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.

Mathew Glock

Posted on 28 February

House Shared Coworking

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.

Mathew Glock

Posted on 28 February

House Shared Coworking

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.

Mathew Glock

Posted on 28 February

<div class="card-group">
  <div class="card">
    <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
      <a href="javascript:;" class="d-block">
        <img src="./assets/img/kit/pro/anastasia.jpg" class="img-fluid border-radius-lg">
      </a>
    </div>

    <div class="card-body pt-2">
      <span class="text-gradient text-primary text-uppercase text-xs font-weight-bold my-2">House</span>
      <a href="javascript:;" class="card-title h5 d-block text-darker">
        Shared Coworking
      </a>
      <p class="card-description mb-4">
        Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.
      </p>
      <div class="author align-items-center">
        <img src="./assets/img/kit/pro/team-2.jpg" alt="..." class="avatar shadow">
        <div class="name ps-3">
          <span>Mathew Glock</span>
          <div class="stats">
            <small>Posted on 28 February</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
      <a href="javascript:;" class="d-block">
        <img src="./assets/img/kit/pro/anastasia.jpg" class="img-fluid border-radius-lg">
      </a>
    </div>

    <div class="card-body pt-2">
      <span class="text-gradient text-primary text-uppercase text-xs font-weight-bold my-2">House</span>
      <a href="javascript:;" class="card-title h5 d-block text-darker">
        Shared Coworking
      </a>
      <p class="card-description mb-4">
        Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.
      </p>
      <div class="author align-items-center">
        <img src="./assets/img/kit/pro/team-2.jpg" alt="..." class="avatar shadow">
        <div class="name ps-3">
          <span>Mathew Glock</span>
          <div class="stats">
            <small>Posted on 28 February</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
      <a href="javascript:;" class="d-block">
        <img src="./assets/img/kit/pro/anastasia.jpg" class="img-fluid border-radius-lg">
      </a>
    </div>

    <div class="card-body pt-2">
      <span class="text-gradient text-primary text-uppercase text-xs font-weight-bold my-2">House</span>
      <a href="javascript:;" class="card-title h5 d-block text-darker">
        Shared Coworking
      </a>
      <p class="card-description mb-4">
        Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.
      </p>
      <div class="author align-items-center">
        <img src="./assets/img/kit/pro/team-2.jpg" alt="..." class="avatar shadow">
        <div class="name ps-3">
          <span>Mathew Glock</span>
          <div class="stats">
            <small>Posted on 28 February</small>
          </div>
        </div>
      </div>
    </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 ...

"Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons."

― Collin Marcus

Natalie Paisley

Credit Analyst

Bruce Mars

Atlanta, U.S.

750

Projects

Soft 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

Entire Apartment • 2 Guests • 1 Bed

Cozy Double Room Near Station

Different people have different taste, and various types of music have many ways of leaving an impact on someone.

<div class="row">
  <div class="col-md-4">
    <div class="card card-plain card-blog mt-4">
      <div class="card-image border-radius-lg position-relative">
        <a href="javascript:;">
          <div class="blur-shadow-image">
            <img class="img border-radius-lg move-on-hover" src="./assets/img/kit/pro/anastasia.jpg">
          </div>
        </a>
      </div>
      <div class="card-body px-0">
        <h5>
          <a href="javascript:;" class="text-dark font-weight-bold">Rover raised $65 million for pet sitting</a>
        </h5>
        <p>
          Finding temporary housing for your dog should be as easy as
          renting an Airbnb. That’s the idea behind Rover ...
        </p>
        <a href="javascript:;" class="text-info icon-move-right">Read More
          <i class="fas fa-arrow-right text-sm" aria-hidden="true"></i>
        </a>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card">
      <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
        <a href="javascript:;" class="d-block blur-shadow-image">
          <img src="./assets/img/kit/pro/anastasia.jpg" class="img-fluid border-radius-lg">
        </a>
      </div>

      <div class="card-body">
        <div class="w-50 mx-auto">
          <img src="./assets/img/kit/pro/anastasia.jpg" alt="" class="img-fluid">
        </div>
        <p class="card-description mb-5 mt-3">
          "Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons."
        </p>
        <div class="pull-left">
          <span>―</span>
          Collin Marcus
        </div>
        <a href="javascript:;" class="text-success icon-move-right pull-right">Read More
          <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
        </a>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card card-profile card-plain">
      <div class="card-body text-center bg-white shadow border-radius-lg p-3">
        <a href="javascript:;">
          <img class="w-100 border-radius-md" src="./assets/img/kit/pro/anastasia.jpg">
        </a>
        <h5 class="mt-3 mb-1 d-md-block d-none">Natalie Paisley</h5>
        <p class="mb-1 d-md-none d-block text-sm font-weight-bold text-darker">Natalie Paisley</p>
        <p class="mb-0 text-xs font-weight-bolder text-warning text-gradient text-uppercase">Credit Analyst</p>
      </div>
    </div>
  </div>

  <div class="col-md-4 mt-4">
    <div class="card card-profile mt-md-0 mt-5">
      <a href="javascript:;">
        <div class="p-3">
          <img class="w-100 border-radius-md" src="./assets/img/kit/pro/anastasia.jpg">
        </div>
      </a>
      <div class="card-body blur justify-content-center text-center mx-4 mb-4 border-radius-md">
        <h4 class="mb-0">Bruce Mars</h4>
        <p>Atlanta, U.S.</p>
        <div class="row justify-content-center text-center">
          <div class="col-12 mx-auto">
            <h5 class="text-info mb-0">750</h5>
            <small>Projects</small>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4 mt-4">
    <div class="card card-blog card-plain">
      <div class="position-relative">
        <a class="d-block blur-shadow-image">
          <img src="./assets/img/kit/pro/anastasia.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
        </a>
      </div>
      <div class="card-body px-1 pt-3">
        <p class="text-gradient text-primary mb-2 text-sm">Entire Apartment • 2 Guests • 1 Bed</p>
        <a href="javascript:;">
          <h5>
            Cozy Double Room Near Station
          </h5>
        </a>
        <p>
          Different people have different taste, and various types of music have many ways of leaving an impact on someone.
        </p>
        <button type="button" class="btn btn-outline-primary btn-sm">From / Night</button>
      </div>
    </div>
  </div>

  <div class="col-md-8 mt-4">
    <div class="card">
      <img class="card-img-top" src="./assets/img/kit/pro/anastasia.jpg">
      <div class="position-relative" style="height: 50px;overflow: hidden;margin-top: -50px;z-index:2;position: relative;">
        <div class="position-absolute w-100 top-0" style="z-index: 1;">
            <svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
              <defs>
                <path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
              </defs>
              <g class="moving-waves">
                <use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
                <use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
                <use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
                <use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
                <use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
                <use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
              </g>
            </svg>
          </div>
      </div>
      <div class="card-body">
        <h4>
          Soft UI Design System
        </h4>
        <p>
          One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That's pretty impressive.
        </p>
        <a href="javascript:;" class="text-primary icon-move-right">More about us
          <i class="fas fa-arrow-right text-xs ms-1" aria-hidden="true"></i>
        </a>
      </div>
    </div>
  </div>

</div>

Profile Cards PRO

Andrew John

Loan Counselor

"Don't walk behind me; I may not lead. Don't walk in front of me; I may not follow. Just walk beside me and be my friend."

Alec Thompson

CEO / Co-Founder

And I love you like Kanye loves Kanye. We need to restart the human foundation.

Joshua Jackson

Landscape Architect

Success is not final, failure is not fatal: it is the courage to continue that counts...

<div class="row">
  <div class="col-md-4">
    <div class="card card-plain text-center">
      <a href="javascript:;">
        <img class="avatar avatar-xl shadow" src="./assets/img/kit/pro/team-1.jpg">
      </a>

      <div class="card-body">
        <h4 class="card-title">Andrew John</h4>
        <h6 class="category text-info text-gradient">Loan Counselor</h6>
        <p class="card-description">
          "Don't walk behind me; I may not lead. Don't walk in front of me; I may not follow. Just walk beside me and be my friend."
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-profile card-plain">
      <div class="row">
        <div class="col-lg-5">
          <a href="javascript:;">
            <div class="position-relative">
              <div class="blur-shadow-image">
                <img class="w-100 rounded-3 shadow-lg" src="./assets/img/kit/pro/brooke.jpg">
              </div>
            </div>
          </a>
        </div>
        <div class="col-lg-7 ps-0 my-auto">
          <div class="card-body text-left">
            <div class="p-md-0 pt-3">
              <h5 class="font-weight-bolder mb-0">Joshua Jackson</h5>
              <p class="text-uppercase text-sm font-weight-bold mb-2">Landscape Architect</p>
            </div>
            <p class="mb-4">Success is not final, failure is not fatal: it is the courage to continue that counts...</p>
            <button type="button" class="btn btn-facebook btn-simple btn-lg mb-0 pe-3 ps-2">
              <i class="fab fa-facebook" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-twitter btn-simple btn-lg mb-0 px-2">
              <i class="fab fa-twitter" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-github btn-simple btn-lg mb-0 px-2">
              <i class="fab fa-github" aria-hidden="true"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-profile card-plain">
      <div class="z-index-1">
        <div class="position-relative w-25">
          <div class="blur-shadow-avatar">
            <img class="avatar avatar-xxl shadow-lg" src="./assets/img/kit/pro/team-4.jpg">
          </div>
        </div>
      </div>
      <div class="card-body ps-0">
        <h5 class="mb-0">Alec Thompson</h5>
        <p class="text-muted">CEO / Co-Founder</p>
        <p>
          And I love you like Kanye loves Kanye. We need to restart the human foundation.
        </p>
        <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-twitter" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
          <span class="btn-inner--icon"><i class="fab fa-twitter" aria-hidden="true"></i></span>
        </button>
        <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-dribbble" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
          <span class="btn-inner--icon"><i class="fab fa-dribbble" aria-hidden="true"></i></span>
        </button>
        <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-linkedin" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
          <span class="btn-inner--icon"><i class="fab fa-linkedin" aria-hidden="true"></i></span>
        </button>
      </div>
    </div>
  </div>
</div>

Full background Cards PRO

Social Analytics

Insight to help you create, connect, and convert. Understand Your Audience's Interests, Influence, Interactions, and Intent. Discover emerging topics and influencers to reach new audiences.

Analytics

Search and Discovery

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

<div class="row">
  <div class="col-md-6">
    <div class="card bg-cover text-center" style="background-image: url('https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved1.jpg')">
      <div class="card-body z-index-2 py-9">
        <h2 class="text-white">Social Analytics</h2>
        <p class="text-white">
          Insight to help you create, connect, and convert. Understand Your Audience's Interests, Influence, Interactions, and Intent. Discover emerging topics and influencers to reach new audiences.
        </p>
        <label class="badge badge-light text-dark">Analytics</label>
      </div>
      <div class="mask bg-gradient-primary border-radius-lg"></div>
    </div>
  </div>
  <div class="col-md-6">
    <a href="javascript:;">
      <div class="card card-background move-on-hover">
        <div class="full-background" style="background-image: url('https://images.unsplash.com/photo-1521620112244-f1d36327c766?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1300&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>
    </a>
  </div>
</div>

Pricing cards PRO

Premium

$89

10 team members

40GB Cloud storage

Integration help

Sketch Files

API Access

Complete documentation

Try Premium

Pro

Free access for 30 members

$299 / year

Buy now

Complete documentation

Working materials in Sketch

2GB cloud storage

Company

$779

per year

10 Projects
1 Team Members
5 Personal Contacts
500 Messages

Get started

<div class="row">
  <div class="col-md-4 mb-4">
    <div class="card">
      <div class="card-header text-center pt-4 pb-3">
        <span class="badge rounded-pill bg-light text-dark">Premium</span>
        <h1 class="font-weight-bold mt-2">
          <small>$</small>89
        </h1>
      </div>
      <div class="card-body text-lg-left text-center pt-0">
        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
            <i class="fas fa-check opacity-10" aria-hidden="true"></i>
          </div>
          <div>
            <span class="ps-3">10 team members</span>
          </div>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
            <i class="fas fa-check opacity-10" aria-hidden="true"></i>
          </div>
          <div>
            <span class="ps-3">40GB Cloud storage </span>
          </div>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
            <i class="fas fa-check opacity-10" aria-hidden="true"></i>
          </div>
          <div>
            <span class="ps-3">Integration help </span>
          </div>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
            <i class="fas fa-check opacity-10" aria-hidden="true"></i>
          </div>
          <div>
            <span class="ps-3">Sketch Files </span>
          </div>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
            <i class="fas fa-minus" aria-hidden="true"></i>
          </div>
          <div>
            <span class="ps-3">API Access </span>
          </div>
        </div>

        <div class="d-flex justify-content-lg-start justify-content-center p-2">
          <div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
            <i class="fas fa-minus" aria-hidden="true"></i>
          </div>
          <div>
            <span class="ps-3">Complete documentation </span>
          </div>
        </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" aria-hidden="true"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-4">
    <div class="card shadow-none border h-100">
      <div class="card-header text-sm-left text-center pt-4 pb-3 px-4">
        <h5 class="mb-1">Pro</h5>
        <p class="mb-3 text-sm">Free access for 30 members</p>
        <h3 class="font-weight-bolder mt-3">
          $299 <small class="text-sm text-secondary font-weight-bold">/ year</small>
        </h3>
        <a href="javascript:;" class="btn btn-sm bg-gradient-dark w-100 border-radius-md mt-4 mb-2">Buy now</a>
      </div>
      <hr class="horizontal dark my-0">
      <div class="card-body">
        <div class="d-flex pb-3">
          <div>
            <i class="fas fa-check text-success text-sm" aria-hidden="true"></i>
          </div>
          <div class="ps-3">
            <span class="text-sm">Complete documentation</span>
          </div>
        </div>

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

        <div class="d-flex pb-3">
          <div>
            <i class="fas fa-check text-success text-sm" aria-hidden="true"></i>
          </div>
          <div class="ps-3">
            <span class="text-sm">2GB cloud storage</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-4">
    <div class="card card-pricing">
      <div class="card-header bg-gradient-dark text-center pt-4 pb-5 position-relative">
        <div class="z-index-1 position-relative">
          <h5 class="text-white">Company</h5>
          <h1 class="text-white mt-2 mb-0">
            <small>$</small>779</h1>
          <h6 class="text-white">per year</h6>
        </div>
      </div>
      <div class="position-relative mt-n5" style="height: 50px;">
        <div class="position-absolute w-100">
            <svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
              <defs>
                <path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
              </defs>
              <g class="moving-waves">
                <use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
                <use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
                <use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
                <use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
                <use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
                <use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
              </g>
            </svg>
          </div>
      </div>
      <div class="card-body text-center">
        <ul class="list-unstyled max-width-200 mx-auto">
          <li>
            <b>10</b> Projects
            <hr class="horizontal dark">
          </li>
          <li>
            <b>1</b> Team Members
            <hr class="horizontal dark">
          </li>
          <li>
            <b>5</b> Personal Contacts
            <hr class="horizontal dark">
          </li>
          <li>
            <b>500</b> Messages
          </li>
        </ul>
        <a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
          Get started
        </a>
      </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/soft-ui-design-system-pro/assets/img/curved-images/curved1.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="javascript:;" 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/soft-ui-design-system-pro/assets/img/curved-images/curved1.jpg" alt="Card image">
</div>