Cards

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

Open Bootstrap Docs

Example

Card image cap
Card title

Some quick example text....

Go somewhere
<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="holder.js/600x400?auto=yes" alt="Card image cap" class="img-fluid">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text....</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
</div>

Metadata

Special title treatment
2 hrs ago

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="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                <h6 class="text-muted mb-4">2 hrs ago</h6>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                <ul class="list-inline mb-4">
                    <li class="list-inline-item pr-2">
                        <a href="#"><i class="fas fa-heart mr-1"></i> 50</a>
                    </li>
                    <li class="list-inline-item">
                        <i class="fas fa-eye text-muted mr-1"></i> 750
                    </li>
                </ul>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</div>
Special title treatment
2 hrs ago

With supporting text below...

Go somewhere
Special title treatment
2 hrs ago

With supporting text below...

Go somewhere
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                <h6 class="heading heading-sm strong-400 text-muted mb-4">
                    2 hrs ago
                </h6>
                <p class="card-text">With supporting text below...</p>
                <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
            </div>
            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col">
                        <span class="avatar avatar-sm bg-purple">JD</span>
                        <span class="avatar-content">David Wally</span>
                    </div>
                    <div class="col text-right text-xs-right">
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item pr-2">
                                <a href="#"><i class="fas fa-heart mr-1"></i> 50</a>
                            </li>
                            <li class="list-inline-item">
                                <i class="fas fa-eye text-muted mr-1"></i> 750
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                <h6 class="heading heading-sm strong-400 text-muted mb-4">
                    2 hrs ago
                </h6>
                <p class="card-text">With supporting text below...</p>
                <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
            </div>
            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col">
                        <span class="avatar avatar-sm bg-purple">JD</span>
                        <span class="avatar-content">David Wally</span>
                    </div>
                    <div class="col text-right text-xs-right">
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item pr-2">
                                2 hrs ago
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Actions

Favorite post

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

Love & bookmark post

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

<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-8">
                        <h5 class="heading h5 mb-0">Favorite post</h5>
                    </div>
                    <div class="col-4">
                        <div class="card-icon-actions text-right">
                            <a href="#" class="favorite active" data-toggle="tooltip" data-original-title="Save to favorites"><i class="fas fa-star"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            </div>
            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col-6">
                        <a href="#" class="btn btn-sm btn-primary">Action button</a>
                    </div>
                    <div class="col-6 text-right">
                        <span class="text-muted">2 hrs ago</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-8">
                        <h5 class="heading h5 mb-0">Love &amp; bookmark post</h5>
                    </div>
                    <div class="col-4">
                        <div class="card-icon-actions text-right">
                            <a href="#" class="favorite" data-toggle="tooltip" data-original-title="Save as favorite"><i class="fas fa-star"></i></a>
                            <a href="#" class="love active" data-toggle="tooltip" data-original-title="Love this"><i class="fas fa-heart"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            </div>
            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col-6">
                        <a href="#" class="btn btn-sm btn-primary">Action button</a>
                    </div>
                    <div class="col-6 text-right">
                        <span class="text-muted">2 hrs ago</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Commentable

JD
Bettie Mavis
New York, US
23 likes

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

<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header py-4">
                <div class="d-flex align-items-center">
                    <span class="avatar avatar-sm bg-purple">JD</span>
                    <div class="avatar-content">
                        <h5 class="h6 mb-0">Bettie Mavis</h5>
                        <small class="d-block text-muted">New York, US</small>    
                    </div>
                </div>
            </div>
            <div class="card-image">
                <img src="holder.js/600x400?auto=yes" class="img-fluid">
            </div>
            <div class="card-body">
                <div class="row mb-1">
                    <div class="col">
                        <div class="card-icon-actions card-icon-actions-lg">
                            <a href="#" class="love active"><i class="fas fa-heart"></i></a>
                            <a href="#"><i class="fas fa-comment"></i></a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-icon-actions card-icon-actions-lg text-right">
                            <a href="#"><i class="fas fa-bookmark"></i></a>
                        </div>
                    </div>
                </div>
                <h6 class="heading h6 mb-3">23 likes</h6>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            </div>
            <div class="card-footer">
                <div class="row ">
                    <div class="col-10">
                        <form class="card-comment-box" role="form">
                            <textarea rows="1" class="form-control textarea-autosize" placeholder="Add a comment..."></textarea>
                        </form>
                    </div>
                    <div class="col-2 text-right">
                        <div class="card-icon-actions card-icon-actions-lg">
                            <a href="#" data-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-ellipsis-h"></i>
                            </a>
                            <div class="dropdown-menu py-0 text-center">
                                <a class="dropdown-item" href="#">Got to post</a>
                                <a class="dropdown-item" href="#">Repost inappropriate</a>
                                <a class="dropdown-item" href="#">Embed</a>
                                <a class="dropdown-item" href="#">Cancel</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

List groups

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header py-4">
                <h5 class="heading h5 font-weight-500 mb-0">Simple list group</h5>
            </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>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header py-4">
                <div class="d-flex align-items-center">
                    <h5 class="heading h5 mb-0">Add team members</h5>
                </div>
            </div>
            <div class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                    <div class="list-group-img">
                        <span class="avatar bg-purple">JD</span>
                    </div>
                    <div class="list-group-content">
                        <div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
                        <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                    </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                    <div class="list-group-img">
                        <span class="avatar bg-pink">TC</span>
                    </div>
                    <div class="list-group-content">
                        <div class="list-group-heading">Tom Cruise <small>11:30 PM</small></div>
                        <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                    </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                    <div class="list-group-img">
                        <span class="avatar bg-blue">WS</span>
                    </div>
                    <div class="list-group-content">
                        <div class="list-group-heading">Will Smith <small>15:45 PM</small></div>
                        <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                    </div>
                </a>
            </div>
            <div class="card-footer py-2 border-top-0">
                <form class="card-comment-box" role="form">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <input class="form-control" placeholder="e.g @willsmith">
                        </div>
                        <div class="col-4 text-right">
                            <button type="button" class="btn btn-sm btn-success btn-icon-only rounded-circle">
                                <span class="btn-inner--icon"><i class="fas fa-check"></i></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Card with overlay

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 text-white border-0 overflow-hidden">
    <img class="card-img" src="../assets/img/backgrounds/img-3.jpg" alt="Card image">
    <span class="mask bg-primary alpha-7"></span>
    <div class="card-img-overlay d-flex align-items-center">
        <div class="col-lg-8">
            <h5 class="heading h3 text-white">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text">Last updated 3 mins ago</p>
        </div>
    </div>
</div>

Colored cards

Theme as framework

We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.

Learn more

Even more components

We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.

Learn more
<div class="row">
    <div class="col-md-6">
        <div class="card bg-primary text-white px-4 py-4 border-0 mb-0">
            <div class="card-body">
                <h1 class="heading h3 text-white">Theme as framework</h1>
                <p class="mt-4">
                    We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
                </p>
                <a href="#" class="btn btn-secondary mt-4">Learn more</a>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card bg-secondary px-4 py-4 border-0 mb-0">
            <div class="card-body">
                <h1 class="heading h3">Even more components</h1>
                <p class="mt-4">
                    We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
                </p>
                <a href="#" class="btn btn-primary mt-4">Learn more</a>
            </div>
        </div>
    </div>
</div>

Pricing cards

Starter

$19

per month
  • Up to 5 users
  • Basic support on Github
  • Monthly updates
  • Free cancelation
<div class="row">
    <div class="col-md-6">
        <div class="card card-pricing text-center px-3 mb-4">
            <div class="card-header py-4">
                <h5 class="mb-4">Starter</h5>
                <h1 class="display-4 text-primary text-center">$19</h1>
                <span class="h6 text-muted">per month</span>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-4">
                    <li>Up to 5 users</li>
                    <li>Basic support on Github</li>
                    <li>Monthly updates</li>
                    <li>Free cancelation</li>
                </ul>
                <button type="button" class="btn btn-primary mb-3">Start free trial</button>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card card-pricing popular text-center px-3 mb-4 z-depth-3">
            <div class="card-header py-4">
                <h5 class="mb-4">Small business</h5>
                <h1 class="display-4 text-primary text-center">$49</h1>
                <span class="h6 text-muted">per month</span>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-4">
                    <li>Up to 15 users</li>
                    <li>Premium email support</li>
                    <li>Weekly updates</li>
                    <li>Free cancelation</li>
                </ul>
                <button type="button" class="btn btn-primary mb-3">Start free trial</button>
            </div>
        </div>
    </div>
</div>

Icon cards

Latest Bootstrap framework (v4.0.0)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Latest Bootstrap framework (v4.0.0)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

<div class="row">
    <div class="col-md-6">
        <div class="card bg-primary">
            <div class="card-body py-5">
                <div class="d-flex align-items-start">
                    <div class="icon icon-lg">
                        <i class="fab fa-twitter text-white"></i>
                    </div>
                    <div class="icon-text">
                        <h5 class="heading text-white">Latest Bootstrap framework <small>(v4.0.0)</small></h5>
                        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card bg-dark">
            <div class="card-body py-5">
                <div class="d-flex align-items-start">
                    <div class="icon icon-lg">
                        <i class="fab fa-twitter text-white"></i>
                    </div>
                    <div class="icon-text">
                        <h5 class="heading text-white">Latest Bootstrap framework <small>(v4.0.0)</small></h5>
                        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Variations

Image placeholder
This is a card title

Each theme comes with updates for the life of the theme. This means you'll never pay for any bug-fixes and compatibility upgrades for your theme, ever.

Card button
<div class="card">
    <img alt="Image placeholder" src="../assets/img/prv/img-1-800x600.jpg" class="card-img-top">
    <div class="card-body">
        <h5 class="heading h5 mb-1">
        	<span class="card-title">This is a card title</span>
        	<small class="text-muted"></small>
        </h5> 
        <p class="card-text">Each theme comes with updates for the life of the theme. This means you'll never pay for any bug-fixes and compatibility upgrades for your theme, ever.</p>
        <a href="#" class="btn btn-sm btn-primary">Card button</a>
    </div>
</div>
Image placeholder
This is a card title

Each theme comes with updates for the life of the theme. This means you'll never pay for any bug-fixes and compatibility upgrades for your theme, ever.

Card button
<div class="card border-0" data-animate-hover="1">
	<div class="animate-this">
		<img alt="Image placeholder" class="rounded z-depth-3 img-fluid" src="../assets/img/prv/img-2-800x600.jpg">
	</div>
	<div class="pt-4">
		<h5 class="card-title">This is a card title</h5>
		<p class="card-text">Each theme comes with updates for the life of the theme. This means you'll never pay for any bug-fixes and compatibility upgrades for your theme, ever.</p>
		<a href="#" class="btn btn-sm btn-primary">Card button</a>
	</div>
</div>
Download Purpose

Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.

<div class="card">
    <div class="card-body py-5">
        <div class="d-flex align-items-start">
            
            <div class="icon">
                <i class="fas fas fa-heart"></i>
            </div>
            
            <div class="icon-text">
                <h5>Download Purpose</h5>
                <p class=" mb-0">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
            </div>
        </div>
    </div>
</div>
Image placeholder
Download Purpose

Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.

<div class="card  shadow--hover">
    <div class="px-5 py-5">
        
        <img alt="Image placeholder" src="../assets/img/icons/dusk/png/desktop-download.png" class="img-fluid">
        
    </div>
    <div class="px-5 pb-5">
        <h5>Download Purpose</h5>
        <p class=" mt-2">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
        <div class="mt-4">
            <a href="#" class="badge badge-lg badge-pill badge-info">colors</a>
            <a href="#" class="badge badge-lg badge-pill badge-info">theme</a>
            <a href="#" class="badge badge-lg badge-pill badge-info">gulp</a>
        </div>
    </div>
</div>
Image placeholder
Responsive design

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

<div>
    <div class="icon mb-4">
        
        <img alt="Image placeholder" src="../assets/img/icons/dusk/png/toolbar-top.png" class="img-fluid">
        
    </div>
    <h5>Responsive design</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>