Cards
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
Page Demo Bootstrap DocBasic 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.
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur.</h6>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
</div>
</div>
Card Inverse
Use .card--inverse
class to turn the card in to dark.
<div class="card card--inverse">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur.</h6>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
</div>
</div>
Card with Actions
Cards can also contains action links in icon format.
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur.</h6>
<div class="actions">
<a href="" class="actions__item zmdi zmdi-trending-up"></a>
<a href="" class="actions__item zmdi zmdi-check-all"></a>
<div class="dropdown actions__item">
<i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
<div class="dropdown-menu dropdown-menu-right">
<a href="" class="dropdown-item">Refresh</a>
<a href="" class="dropdown-item">Manage Widgets</a>
<a href="" class="dropdown-item">Settings</a>
</div>
</div>
</div>
<p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
</div>
</div>
Body
The building block of a card is the .card-body
. Use it whenever you need a padded section within a card.
<div class="card">
<div class="card-body">
<p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
Card Links
Links are added and placed next to each other by adding .card-link
to a <a>
tag.
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>
<p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Header and Footer
Add an optional header and/or footer within a card.
<div class="card">
<div class="card-header">Card Header</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur.</h6>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
</div>
<div class="card-footer">Card Footer</div>
</div>
Images
Cards can also include images in the top and bottom.
<!-- Image on top -->
<div class="card">
<img class="card-img-top" src="image-path">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>
<p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
<!-- Image on bottom -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>
<p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<img class="card-img-bottom" src="image-path">
</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 .card--inverse
<div class="card card--inverse">
<img class="card-img" src="image-path">
<div class="card-img-overlay">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>
<p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
</div>
Background and Color
Use text and background utilities to change the appearance of a card.
<div class="card bg-blue card--inverse">
...
</div>
<div class="card bg-red card--inverse">
...
</div>
<div class="card bg-green card--inverse">
...
</div>
Card Groups
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex;
to achieve their uniform sizing.
<div class="card-group">
<div class="card">
<!-- Card Contents -->
</div>
<div class="card">
<!-- Card Contents -->
</div>
<div class="card">
<!-- Card Contents -->
</div>
</div>
Card Decks
Need a set of equal width and height cards that aren’t attached to one another? Use card decks.
<div class="card-deck">
<div class="card">
<!-- Card Contents -->
</div>
<div class="card">
<!-- Card Contents -->
</div>
<div class="card">
<!-- Card Contents -->
</div>
</div>
Requirements:
/scss/inc/bootstrap-overrides/_cards.scss