sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
358 lines (349 loc) • 17.2 kB
HTML
---
layout: default
title: "Card - Sleek Admin Dashboard Template"
parent: "components"
sub_parent: "components"
activePage: "card"
plugins: []
---
<div class="breadcrumb-wrapper">
<h1>Card</h1>
{% include breadcrumb.htm %}
</div>
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Card with Image</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p class="mb-5">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/card/" target="_blank"> More
Details </a></p>
</div>
<div class="col-md-6 col-xl-3">
<div class="card mb-4">
<img class="card-img-top" src="assets/img/elements/cc1.jpg">
<div class="card-body">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="btn btn-outline-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card mb-4">
<div class="card-body">
<img class="card-img-top mb-4 rounded" src="assets/img/elements/cc1a.jpg">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="btn btn-outline-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card mb-4 p-0">
<h5 class="card-title text-primary pt-4 pb-2 px-3">Card Title</h5>
<img class="card-img rounded-0" src="assets/img/elements/cc1b.jpg">
<div class="card-body">
<p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="btn btn-link px-0">Card Link</a>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title text-primary mb-1">Card Title</h5>
<p class="pb-3">Sub-heading text</p>
<img class="mb-4 card-img" src="assets/img/elements/cc1c.jpg">
<p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="btn btn-link px-0">Card Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Second Row -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Text Alignment </h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p class="mb-5">You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/card/#text-alignment" target="_blank"> more details.</a></p>
</div>
<div class="col-md-6 col-xl-4">
<div class="card py-3 mb-4">
<div class="card-body">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="btn btn-outline-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card mb-4 py-3">
<div class="card-body text-center">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="btn btn-outline-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card mb-4 py-3">
<div class="card-body text-right">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="btn btn-outline-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Third Row -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2> Card with image overlay </h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p class="mb-5">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. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/card/#image-overlays" target="_blank"> more details.</a></p>
</div>
<div class="col-md-12 col-lg-6 col-xl-4">
<div class="card mb-4 bg-gradient-dark">
<img class="card-img-top" src="assets/img/elements/cc2a.jpg">
<div class="card-img-overlay absolute-bottom">
<h5 class="card-title text-primary text-white">Card Title</h5>
<p class="card-text text-white pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="text-white">Last update 2 mins ago</a>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 col-xl-4">
<div class="card mb-4">
<img class="card-img-top" src="assets/img/elements/cc2b.jpg">
<div class="card-img-overlay absolute-middle">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="text-primary">Last update 2 mins ago</a>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 col-xl-4">
<div class="card mb-4">
<img class="card-img-top" src="assets/img/elements/cc2c.jpg">
<div class="card-img-overlay">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="text-primary">Last update 2 mins ago</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Card with Deck </h2>
</div>
<div class="card-body">
<p class="mb-5">Need a set of equal width and height cards that aren’t attached to one another? Use card decks. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/card/#card-decks" target="_blank"> More Details </a></p>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="assets/img/elements/cc3a.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-3">This is a longer 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">
<img class="card-img-top" src="assets/img/elements/cc3b.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-3">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="assets/img/elements/cc3c.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-3">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.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Using utilities</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p class="mb-5">Use our handful of available sizing utilities to quickly set a card’s width. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/card/#using-utilities" target="_blank"> more details.</a></p>
</div>
<div class="col-md-6">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam.</p>
<a href="#" class="btn btn-outline-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<a href="#" class="btn btn-outline-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Cards Groups </h2>
</div>
<div class="card-body">
<p class="mb-5">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. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/card/#card-groups" target="_blank"> more details.</a></p>
<div class="card-group">
<div class="card">
<img class="card-img-top" src="assets/img/elements/cc4a.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-4">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">
<img class="card-img-top" src="assets/img/elements/cc4b.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-4">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="assets/img/elements/cc4c.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-4">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.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Background and color </h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p class="mb-5">Use text and background utilities to change the appearance of a card. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/card/"
target="_blank"> more details.</a></p>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card text-white bg-primary mb-3">
<div class="card-header bg-primary">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card Title</h5>
<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>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card text-white bg-secondary mb-3">
<div class="card-header bg-secondary">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card Title</h5>
<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>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card text-white bg-success mb-3">
<div class="card-header bg-success">Header</div>
<div class="card-body">
<h5 class="card-title">Success card Title</h5>
<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>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card text-white bg-danger mb-3">
<div class="card-header bg-danger">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card Title</h5>
<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>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card text-white bg-warning mb-3">
<div class="card-header bg-warning">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card Title</h5>
<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>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card text-white bg-info mb-3">
<div class="card-header bg-info">Header</div>
<div class="card-body">
<h5 class="card-title">Info card Title</h5>
<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>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card bg-light mb-3">
<div class="card-header bg-light">Header</div>
<div class="card-body">
<h5 class="card-title text-primary">Light card Title</h5>
<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>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card text-white bg-dark mb-3">
<div class="card-header bg-dark">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card Title</h5>
<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>
</div>
</div>
</div>
</div>