Cards

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

Example

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

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 
<div class="card" style="width: 20rem;">
  <img class="card-img-top" data-src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</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>
    <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Content types

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

Blog Cards

Features
FiftyThree Files For Paper

Yesterday, as Facebook launched its news reader app Paper, design-focused startup FiftyThree called out Facebook...

... Johana Doe
10.4K · 425
Focus

Our brains are finely attuned to distraction

Business
Springer Spends $343M To Buy Business Insider

German media giant Axel Springer has announced it’s acquiring online business news publication Business Inside...

Card image
Card Title

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

Last updated 3 mins ago

Here Be Dragons

Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...

Focus
Stay focused

Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus... 

<div class="row">
  <div class="col-md-4">
  
  <div class="card card-blog" data-header="pattern">
  <a href="javascript:;">
    <img class="img pattern rounded" src="../../../assets/img/ill/p2.svg">
  </a>
  <div class="card-body">
    <h6 class="card-category text-danger">
      <i class="ni ni-badge"></i> Features
    </h6>
    <h5 class="card-title">
      <a href="javascript:;">FiftyThree Files For Paper</a>
    </h5>
    <p class="card-description">
      Yesterday, as Facebook launched its news reader app Paper, design-focused startup FiftyThree called out Facebook...
    </p>
  </div>
  
  <div class="card-footer">
  <div class="author">
    <img src="../../../assets/img/faces/team-3.jpg" alt="..." class="avatar img-raised">
    <span>Johana Doe</span>
  </div>
   <div class="stats stats-right">
    <i class="ni ni-favourite-28"></i> 10.4K ·
    <i class="ni ni-archive-2"></i> 425
  </div>
</div>

</div>

  
  <div class="card bg-gradient-danger">
  <div class="card-body pb-0">
    <h6 class="category-social text-white text-uppercase">
      <i class="fa fa-fire"></i> Focus
    </h6>
    <p class="lead text-white my-0">
      Our brains are finely attuned to distraction
    </p>
  </div>
  <a href="javascript:;">
    <img class="img pattern rounded" src="../../../assets/img/ill/p51.svg">
  </a>
</div>

  </div>
  <div class="col-md-4">
    
    <div class="card card-blog" data-header="skew">
  <div class="card-header bg-yellow">
    <div class="card-image">
      <img class="card-img-top" src="../../../assets/img/ill/inn.svg">
    </div>
  </div>
  <div class="card-body">
    <h6 class="card-category">
      <i class="ni ni-paper-diploma"></i>
      Business
    </h6>
    <h5 class="card-title">
      <a href="javascript:;">Springer Spends $343M To Buy Business Insider</a>
    </h5>
    <p class="card-description">
      German media giant Axel Springer has announced it’s acquiring online business news publication Business Inside...
    </p>
  </div>
</div>

    
    <div class="card text-white bg-default">
  <img class="card-img" src="../../../assets/img/ill/inn.svg" alt="Card image">
  <div class="card-img-overlay d-flex align-items-center">
    <div class="content">
      <h5 class="h2 card-title text-white mb-2">Card Title</h5>
      <p class="card-description">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text text-sm font-weight-bold">Last updated 3 mins ago</p>
    </div>
  </div>
</div>

  </div>
  <div class="col-md-4">
    
    <div class="card card-blog bg-info">
  <img class="img pattern rounded" src="../../../assets/img/ill/p7.svg">
  <div class="card-body">
    <h4 class="display-4 text-white">Here Be Dragons</h4>
    <p class="lead text-white mt-0">Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...</p>
  </div>
</div>

    
    <div class="card card-blog bg-primary" data-image="path">
  <div class="card-image">
    <img class="img rounded" src="../../../assets/img/ill/p22.png">
  </div>
  <div class="card-body pt-0">
    <h6 class="category text-white">
      <i class="ni ni-atom"></i>
      Focus
    </h6>
    <h5 class="card-title">
      <a class="text-white" href="javascript:;">Stay focused</a>
    </h5>
    <p class="card-description text-white">
      Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...
    </p>
  </div>
</div>

  </div>

</div>

Profile Cards

Connect Message
22 Friends
10 Photos
89 Comments
Daisy Paisley, 28
Bucharest, Romania
Edit Profile Settings Log out

Dylan Wyatt

Team Lead

  • Dedicated entrepreneur
  • Urban exploration
  • Able to get good at everything
Austin Johnson
Project Manager

Don't be scared of the truth because we need to restart the human foundation in truth And I love you... 

<div class="row">
  <div class="col-md-4">
    
    <div class="card card-profile">
  <div class="card-header bg-info" style="background-image: url('../../../assets/img/ill/inn.svg')">
    <div class="card-avatar">
      <a href="javascript:;">
        <img class="img img-raised rounded-circle" src="../../../assets/img/faces/team-4.jpg">
      </a>
    </div>
  </div>

  <div class="card-body pt-0">
    <div class="d-flex justify-content-between">
      <a href="javascript:;" class="btn btn-sm btn-info mr-4 mt-3">Connect</a>
      <a href="javascript:;" class="btn btn-sm btn-default float-right mt-3">Message</a>
    </div>
    <div class="row">
      <div class="col">
        <div class="card-profile-stats d-flex justify-content-center">
          <div>
            <span class="heading">22</span>
            <span class="description">Friends</span>
          </div>
          <div>
            <span class="heading">10</span>
            <span class="description">Photos</span>
          </div>
          <div>
            <span class="heading">89</span>
            <span class="description">Comments</span>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center">
      <h5 class="h4">
        Daisy Paisley<span class="font-weight-light">, 28</span>
      </h5>
      <div class="font-weight-300">
        <i class="ni location_pin mr-2"></i>Bucharest, Romania
      </div>
    </div>
  </div>
</div>

  </div>
  <div class="col-md-4">
    
    <div class="card card-profile" data-image="profile-image">
  <div class="card-header">
    <div class="card-image">
      <div class="dropdown">
        <button type="button" class="btn btn-link dropdown-toggle btn-icon-only" data-toggle="dropdown" aria-expanded="false">
          <i class="ni ni-settings-gear-65"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
          <a class="dropdown-item" href="javascript:;">Edit Profile</a>
          <a class="dropdown-item" href="javascript:;">Settings</a>
          <a class="dropdown-item" href="javascript:;">Log out</a>
        </div>
      </div>
      <a href="javascript:;">
        <img class="img rounded" src="../../../assets/img/faces/team-5.jpg">
      </a>
    </div>
  </div>
  <div class="card-body pt-0">
    <h4 class="display-4 mb-0">Dylan Wyatt</h4>
    <p class="lead">Team Lead</p>
    <div class="table-responsive">
      <ul class="list-unstyled ">
        <li class="py-1">
          <div class="d-flex align-items-center">
            <div>
              <div class="badge badge-circle badge-info mr-3">
                <i class="ni ni-atom"></i>
              </div>
            </div>
            <div>
              <h6 class="mb-1">Dedicated entrepreneur</h6>
            </div>
          </div>
        </li>
        <li class="py-1">
          <div class="d-flex align-items-center">
            <div>
              <div class="badge badge-circle badge-success mr-3">
                <i class="ni ni-user-run"></i>
              </div>
            </div>
            <div>
              <h6 class="mb-1">Urban exploration</h6>
            </div>
          </div>
        </li>
        <li class="py-1">
          <div class="d-flex align-items-center">
            <div>
              <div class="badge badge-circle badge-danger mr-3">
                <i class="ni ni-chart-bar-32"></i>
              </div>
            </div>
            <div>
              <h6 class="mb-1">Able to get good at everything</h6>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

  </div>
  <div class="col-md-4">
    
    <div class="card card-profile" data-image="img-raised">
  <div class="card-header-image">
    <a href="javascript:;">
      <img class="img" src="../../../assets/img/faces/alejandro-escamilla.jpg">
    </a>
    <div class="card-title text-white">
      Austin Johnson
    </div>
  </div>
  <div class="card-body">
    <h6 class="card-category text-info text-center">Project Manager</h6>
    <p class="card-description">
      Don't be scared of the truth because we need to restart the human foundation in truth And I love you...
    </p>
  </div>
  <div class="card-footer text-center">
    <button type="button" class="btn-instagram btn-icon-only btn-simple btn btn-default">
      <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span>
    </button>
    <button type="button" class="btn-icon-only btn-simple btn btn-twitter">
      <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span>
    </button>
    <button type="button" class="btn-icon-only btn-simple btn btn-dribbble">
      <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span>
    </button>
  </div>
</div>

  </div>
</div>

Full background Cards

<div class="row">
  <div class="col-md-6 col-lg-3">
    
    <div class="card card-blog card-background" data-animation="zooming">
  <div class="full-background" style="background-image: url('../../../assets/img/theme/josh-appel.jpg"></div>
  <a href="javascript:;">
    <div class="card-body">
      <div class="content-bottom">
        <h6 class="card-category text-white opacity-8">New Challenges</h6>
          <h5 class="card-title">Touch on a trend</h5>
      </div>
    </div>
  </a>
</div>

  </div>
  <div class="col-md-6 col-lg-3">
    
    <div class="card card-blog card-background" data-animation="zooming">
  <div class="full-background" style="background-image: url('../../../assets/img/theme/john-hoang.jpg"></div>
  <a href="javascript:;">
    <div class="card-body">
      <div class="content-bottom">
        <h6 class="card-category text-white opacity-8">New Opportunities</h6>
          <h5 class="card-title">Constantly growing</h5>
      </div>
    </div>
  </a>
</div>

  </div>
  <div class="col-md-6">
    
    <div class="card card-blog card-background" data-animation="true">
  <div class="full-background" style="background-image: url('../../../assets/img/theme/kit-suman.jpg"></div>
  <div class="card-body">
    <div class="content-bottom">
      <h6 class="card-category text-white">Sales Leads</h6>
      <a href="javascript:;">
        <h5 class="card-title">Configure Blockchain Technology</h5>
      </a>
    </div>
  </div>
</div>

  </div>
</div>

Pricing Cards

Bravo pack
$49
per application
  • Complete documentation
  • Working materials in Sketch
  • 2GB cloud storage
Request a demo
Premium

$109

  • 100 Projects
  • 5 Team Members
  • 55 Personal Contacts
  • 5K Messages
Get Started

Premium pack

$ 89 /mo

  • 10 Templates + Updates

  • + Adobe Sketch

<div class="row">
  <div class="col-md-4">
    
    <div class="card card-pricing bg-success border-0 text-center mb-4" style="background-image: url('../../../assets/img/ill/pattern_pricing1.svg">
  <div class="card-header bg-transparent">
    <h6 class="text-uppercase ls-1 text-white py-3 mb-0">Bravo pack</h6>
  </div>
  <div class="card-body">
    <div class="display-2 text-white">$49</div>
    <span class=" text-white">per application</span>
    <ul class="list-unstyled my-4">
      <li>
        <div class="d-flex align-items-center">
          <div>
            <div class="icon icon-xs icon-shape bg-white shadow rounded-circle text-success">
              <i class="ni ni-book-bookmark"></i>
            </div>
          </div>
          <div>
            <span class="pl-2 text-sm text-white">Complete documentation</span>
          </div>
        </div>
      </li>
      <li>
        <div class="d-flex align-items-center">
          <div>
            <div class="icon icon-xs icon-shape bg-white shadow rounded-circle text-success">
              <i class="ni ni-diamond"></i>
            </div>
          </div>
          <div>
            <span class="pl-2 text-sm text-white">Working materials in Sketch</span>
          </div>
        </div>
      </li>
      <li>
        <div class="d-flex align-items-center">
          <div>
            <div class="icon icon-xs icon-shape bg-white shadow rounded-circle text-success">
              <i class="ni ni-chart-pie-35"></i>
            </div>
          </div>
          <div>
            <span class="pl-2 text-sm text-white">2GB cloud storage</span>
          </div>
        </div>
      </li>
    </ul>
    <button type="button" class="btn btn-link text-white mb-3">Free Trial</button>
  </div>
  <div class="card-footer bg-transparent">
    <a href="#!" class=" text-white">Request a demo</a>
  </div>
</div>

  </div>
  <div class="col-md-4">
    
    <div class="card card-pricing bg-default card-background" style="background-image: url('../../../assets/img/ill/pricing_bg.svg" data-background="image">
  <div class="card-body">
    <h6 class="card-category text-white text-uppercase">Premium</h6>
    <h1 class="card-title">
      <small class="text-white">$</small>109
    </h1>
    <ul>
      <li>
        <b>100</b> Projects
      </li>
      <li>
        <b>5</b> Team Members
      </li>
      <li>
        <b>55</b> Personal Contacts
      </li>
      <li>
        <b>5K</b> Messages
      </li>
    </ul>
    <a href="javascript:;" class="btn btn-white btn-sm mt-3">
      Get Started
    </a>
  </div>
</div>

  </div>
  <div class="col-md-4">
    
    <div class="card card-pricing bg-gradient-warning text-center" data-icon="big-icon">
  <div class="card-header bg-transparent">
    <div class="icon text-white">
      <i class="ni ni-camera-compact"></i>
    </div>
    <p class="text-white">Premium pack</p>
  </div>
  <div class="card-body">
    <div class="price d-inline">
      <span class="currency text-white">$</span>
      <span class="amount text-white">89</span>
      <span class="frequency text-white">/mo</span>
    </div>
    <ul class="list-unstyled align-items-center">
      <li>
        <p class="text-sm text-white">10 Templates + Updates</p>
      </li>
      <li>
        <p class="text-sm text-white">+ Adobe Sketch</p>
      </li>
    </ul>
  </div>
  <div class="card-footer bg-transparent">
    <button type="button" class="btn btn-outline-white">Upgrade</button>
  </div>
</div>

  </div>
</div>

Other Card

Design System

That’s my skill. I’m not really specifically talented at anything except for the ability to learn. 

  <div class="row">
    <div class="col-lg-4 mr-auto text-left mt-4">
      <div class="card bg-default shadow border-0">
        <img src="../../../assets/img/theme/img-1-1200x1000.jpg" class="card-img-top">
        <blockquote class="card-blockquote">
          <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="svg-bg">
            <polygon points="0,52 583,95 0,95" class="fill-default"></polygon>
            <polygon points="0,42 583,95 683,0 0,95" opacity=".2" class="fill-default"></polygon>
          </svg>
          <h4 class="display-4 text-white">Design System</h4>
          <p class="lead text-italic text-white">That’s my skill. I’m not really specifically talented at anything except for the ability to learn. </p>
        </blockquote>
      </div>
    </div>
  </div>

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

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

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

Card title

Card subtitle

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

Card link Another link 
<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <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="card-link">Card link</a>
    <a href="javascript:;" class="card-link">Another link</a>
  </div>
</div>

Images

.card-img-top places an image to the top of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.

Card image cap

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

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <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>

List groups

Create lists of content in a card with a flush list group.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 20rem;">
  <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>
</div>
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card card-nav-tabs" style="width: 20rem;">
  <div class="card-header card-header-danger">
    Featured  
  </div>
  <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>
</div>

Add an optional header and/or footer within a card.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<div class="card card-nav-tabs">
  <div class="card-header card-header-warning">
    Featured
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card headers can be styled by adding .card-header to <h*> elements.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<div class="card card-nav-tabs">
  <h4 class="card-header card-header-info">Featured</h4>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Quote

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

Someone famous in Source Title
<div class="card card-nav-tabs">
  <div class="card-header card-header-success">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago 
<div class="card card-nav-tabs text-center">
  <div class="card-header card-header-primary">
    Featured
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with text align classes.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Add some navigation to a card’s header (or block) with Bootstrap’s nav components.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<div class="card text-center">
  <div class="card-header card-header-rose">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="javascript:;">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:;">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="javascript:;">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="javascript:;">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:;">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="javascript:;">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="javascript:;" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Image caps

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

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 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 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card">
  <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>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

Card image

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

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <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">Last updated 3 mins ago</p>
  </div>
</div>