Our BootstrapVue cards provide a flexible and extensible content container with multiple variants and options.
Examples
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>
<b-card
title= "Card Title"
img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg"
img-alt= "Image"
img-top
tag= "article"
style= "max-width: 20rem;"
class= "mb-2"
>
<b-card-text>
Some quick example text to build on the card title and make up the bulk of the card's content.
</b-card-text>
<b-button href= "javascript:;" variant= "primary" > Go somewhere</b-button>
</b-card>
</div>
Stats card
<stats-card title= "New users"
type= "gradient-orange"
sub-title= "2,356"
icon= "ni ni-chart-pie-35" >
<template slot= "footer" >
<span class= "text-success mr-2" ><i class= "fa fa-arrow-up" ></i> 3.48%</span>
<span class= "text-nowrap" > Since last month</span>
</template>
</stats-card>
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>
<b-card>
<b-card-body>
This is some text within a card body.
</b-card-body>
</b-card>
</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.
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 card has supporting text below as a natural lead-in to additional content.
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 card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<b-card-group>
<b-card
title= "Card Title"
img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg"
img-alt= "Image"
img-top
tag= "article"
style= "max-width: 20rem;"
class= "mb-2"
>
<b-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.
</b-card-text>
<small class= "text-muted" > Last updated 3 mins ago</small>
</b-card>
<b-card
title= "Card Title"
img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg"
img-alt= "Image"
img-top
tag= "article"
style= "max-width: 20rem;"
class= "mb-2"
>
<b-card-text>
This card has supporting text below as a natural lead-in to additional content.
</b-card-text>
<small class= "text-muted" > Last updated 3 mins ago</small>
</b-card>
<b-card
title= "Card Title"
img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg"
img-alt= "Image"
img-top
tag= "article"
style= "max-width: 20rem;"
class= "mb-2"
>
<b-card-text>
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
</b-card-text>
<small class= "text-muted" > Last updated 3 mins ago</small>
</b-card>
</b-card-group>
Card decks PRO
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 card has supporting text below as a natural lead-in to additional content.
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 card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<b-card-group deck >
<b-card
title= "Card Title"
img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg"
img-alt= "Image"
img-top
tag= "article"
style= "max-width: 20rem;"
class= "mb-2"
>
<b-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.
</b-card-text>
<small class= "text-muted" > Last updated 3 mins ago</small>
</b-card>
<b-card
title= "Card Title"
img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg"
img-alt= "Image"
img-top
tag= "article"
style= "max-width: 20rem;"
class= "mb-2"
>
<b-card-text>
This card has supporting text below as a natural lead-in to additional content.
</b-card-text>
<small class= "text-muted" > Last updated 3 mins ago</small>
</b-card>
<b-card
title= "Card Title"
img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg"
img-alt= "Image"
img-top
tag= "article"
style= "max-width: 20rem;"
class= "mb-2"
>
<b-card-text>
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
</b-card-text>
<small class= "text-muted" > Last updated 3 mins ago</small>
</b-card>
</b-card-group>
Card columns PRO
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
This card has a regular title and short paragraphy of text below it.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
Last updated 3 mins ago
<div>
<b-card-group columns >
<b-card
title= "Card title that wraps to a new line"
img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg"
img-alt= "Image"
img-top
>
<b-card-text>
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</b-card-text>
</b-card>
<b-card>
<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>
</b-card>
<b-card title= "Title" img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" img-alt= "Image" img-top >
<b-card-text>
This card has supporting text below as a natural lead-in to additional content.
</b-card-text>
<b-card-text class= "small text-muted" > Last updated 3 mins ago</b-card-text>
</b-card>
<b-card bg-variant= "primary" text-variant= "white" >
<blockquote class= "card-blockquote text-center" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class= "blockquote-footer" >
<small> Someone famous in <cite title= "Source Title" > Source Title</cite></small>
</footer>
</blockquote>
</b-card>
<b-card>
<b-card-title> Title</b-card-title>
<b-card-text>
This card has supporting text below as a natural lead-in to additional content.
</b-card-text>
<b-card-text class= "small text-muted" > Last updated 3 mins ago</b-card-text>
</b-card>
<b-card img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" img-alt= "Image" overlay ></b-card>
<b-card img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" img-alt= "Image" img-top >
<b-card-text>
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
</b-card-text>
<template v-slot:footer >
<small class= "text-muted" > Footer Text</small>
</template>
</b-card>
</b-card-group>
</div>
Advanced Examples
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>
<b-card
no-body
style= "max-width: 20rem;"
img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg"
img-alt= "Image"
img-top
>
<b-list-group flush >
<b-list-group-item> Cras justo odio</b-list-group-item>
<b-list-group-item> Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item> Vestibulum at eros</b-list-group-item>
</b-list-group>
<b-card-body>
<b-card-title> Card Title</b-card-title>
<b-card-text>
Some quick example text to build on the card title and make up the bulk of the card's
content.
</b-card-text>
<b-button href= "javascript:;" variant= "primary" > Go somewhere</b-button>
</b-card-body>
</b-card>
</div>
Profile PRO
22
Friends
10
Photos
89
Comments
Jessica Jones, 27
Bucharest, Romania
<b-card no-body img-src= "img/theme/img-1-1000x600.jpg" alt= "Image placeholder" img-top class= "card-profile" >
<b-row class= "justify-content-center" >
<b-col lg= "3" class= "order-lg-2" >
<div class= "card-profile-image" >
<a href= "javascript:;" >
<b-img src= "img/theme/team-4.jpg" rounded= "circle" />
</a>
</div>
</b-col>
</b-row>
<b-card-header class= "text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4" >
<div class= "d-flex justify-content-between" >
<base-button type= "info" size= "sm" class= "mr-4" > Connect</base-button>
<base-button type= "default" size= "sm" class= "float-right" > Message</base-button>
</div>
</b-card-header>
<b-card-body class= "pt-0" >
<b-row>
<b-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>
</b-col>
</b-row>
<div class= "text-center" >
<h5 class= "h3" >
Jessica Jones<span class= "font-weight-light" > , 27</span>
</h5>
<div class= "h5 font-weight-300" >
<i class= "ni location_pin mr-2" ></i> Bucharest, Romania
</div>
</div>
</b-card-body>
</b-card>
Working remoteley
●
Active
Add
<card>
<!-- Card body -->
<b-row align-v= "center" >
<b-col md= "auto" >
<!-- Avatar -->
<a href= "javascript:;" class= "avatar avatar-xl rounded-circle" >
<img alt= "Image placeholder" src= "img/theme/team-2.jpg" >
</a>
</b-col>
<b-col class= "ml--2" >
<h4 class= "mb-0" >
<a href= "javascript:;" > John Snow</a>
</h4>
<p class= "text-sm text-muted mb-0" > Working remoteley</p>
<span class= "text-success" > ● </span>
<small> Active</small>
</b-col>
<b-col md= "auto" >
<base-button type= "primary" size= "sm" > Add</base-button>
</b-col>
</b-row>
</card>
Team member PRO
Ryan Tompson
Web Developer
<card>
<!-- Card body -->
<a href= "javascript:;" >
<b-img src= "img/theme/team-1.jpg"
fluid
rounded= "circle"
class= "img-center shadow shadow-lg--hover" style= "width: 140px;" />
</a>
<div class= "pt-4 text-center" >
<h5 class= "h3 title" >
<span class= "d-block mb-1" > Ryan Tompson</span>
<small class= "h4 font-weight-light text-muted" > Web Developer</small>
</h5>
<div class= "mt-3" >
<a href= "javascript:;" class= "btn btn-twitter btn-icon-only rounded-circle" >
<i class= "fab fa-twitter" ></i>
</a>
<a href= "javascript:;" class= "btn btn-facebook btn-icon-only rounded-circle" >
<i class= "fab fa-facebook" ></i>
</a>
<a href= "javascript:;" class= "btn btn-dribbble btn-icon-only rounded-circle" >
<i class= "fab fa-dribbble" ></i>
</a>
</div>
</div>
</card>
Image PRO
Get started with Argon
by John Snow on Oct 29th at 10:23 AM
Argon is a great free UI package based on Bootstrap 4 that includes the most important components and features.
View article
<b-card no-body img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt= "Image placeholder" img-top >
<!-- Card body -->
<b-card-body >
<b-card-title title-tag= "h5" class= "h2 mb-0" > Get started with Argon</b-card-title>
<small class= "text-muted" > by John Snow on Oct 29th at 10:23 AM</small>
<b-card-text class= "mt-4" > Argon is a great free UI package based on Bootstrap 4 that includes the most
important components and features.</b-card-text>
<a href= "javascript:;" class= "btn btn-link px-0" > View article</a>
</b-card-body>
</b-card>
Blockquote PRO
Testimonial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<card gradient= "default" >
<b-card-title title-tag= "h3" class= "text-white" > Testimonial</b-card-title>
<blockquote class= "blockquote text-white mb-0" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class= "blockquote-footer text-danger" > Someone famous in <cite title= "Source Title" > Source
Title</cite></footer>
</blockquote>
</card>
Pricing PRO
$49
per application
Working materials in Sketch
Start free trial
<card gradient= "success"
header-classes= "bg-transparent"
footer-classes= "bg-transparent"
body-classes= "px-lg-7"
class= "card-pricing border-0 text-center mb-4" >
<!--Header-->
<h4 slot= "header" class= "text-uppercase ls-1 text-white py-3 mb-0" > Bravo pack</h4>
<!--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" >
<i class= "fas fa-terminal" ></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" >
<i class= "fas fa-pen-fancy" ></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" >
<i class= "fas fa-hdd" ></i>
</div>
</div>
<div>
<span class= "pl-2 text-sm text-white" > 2GB cloud storage</span>
</div>
</div>
</li>
</ul>
<base-button type= "primary" class= "mb-3" > Start free trial</base-button>
<!--Footer-->
<a slot= "footer" href= "javascript:;" class= " text-white" > Request a demo</a>
</card>
Overlay PRO
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
<b-card no-body img-src= "img/theme/img-1-1000x600.jpg" alt= "Card image" class= "bg-dark text-white border-0" >
<div class= "card-img-overlay d-flex align-items-center" >
<div>
<b-card-title title-tag= "h5" class= "h2 text-white mb-2" > Card title</b-card-title>
<b-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.</b-card-text>
<b-card-text class= "text-sm font-weight-bold" > Last updated 3 mins ago</b-card-text>
</div>
</div>
</b-card>
Stats
<b-row >
<b-col xl= "3" md= "6" >
<stats-card title= "Total traffic"
type= "gradient-red"
sub-title= "350,897"
icon= "ni ni-active-40" >
<template slot= "footer" >
<span class= "text-success mr-2" ><i class= "fa fa-arrow-up" ></i> 3.48%</span>
<span class= "text-nowrap" > Since last month</span>
</template>
</stats-card>
</b-col>
<b-col xl= "3" md= "6" >
<stats-card title= "New users"
type= "gradient-orange"
sub-title= "2,356"
icon= "ni ni-chart-pie-35" >
<template slot= "footer" >
<span class= "text-success mr-2" ><i class= "fa fa-arrow-up" ></i> 3.48%</span>
<span class= "text-nowrap" > Since last month</span>
</template>
</stats-card>
</b-col>
</b-row>
<b-row >
<b-col xl= "3" md= "6" >
<stats-card type= "gradient-white"
icon= "ni ni-active-40 text-dark"
class= "bg-gradient-default text-white" >
<h5 class= "card-title text-uppercase text-white mb-0" > Total traffic</h5>
<span class= "h2 font-weight-bold mb-0 text-white" > 350,897</span>
<template slot= "footer" >
<span class= "text-white mr-2" ><i class= "fa fa-arrow-up" ></i> 3.48%</span>
<span class= "text-nowrap text-white" > Since last month</span>
</template>
</stats-card>
</b-col>
<b-col xl= "3" md= "6" >
<stats-card type= "gradient-white"
icon= "ni ni-chart-pie-35 text-dark"
class= "bg-gradient-primary" >
<h5 class= "card-title text-uppercase text-white mb-0" > New users</h5>
<span class= "h2 font-weight-bold mb-0 text-white" > 2,356</span>
<template slot= "footer" >
<span class= "text-white mr-2" ><i class= "fa fa-arrow-up" ></i> 3.48%</span>
<span class= "text-nowrap text-white" > Since last month</span>
</template>
</stats-card>
</b-col>
</b-row>
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.
Background Image
<div>
<b-card
img-src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" >
</b-card>
</div>