An example some text within a card body.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Source Code
<div class="card card-body">
<p class="card-text">...</p>
</div><!-- card -->
An example of using card title. In the same way, links are added and placed next to each other by adding link tag.
This is the 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 linkThis is the 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 linkThis is the 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 linkSource Code
<div class="card">
<div class="card-body">
<h5 class="card-title">The Card Title</h5>
<p class="card-subtitle">This is the card subtitle</p>
<p class="card-text">...</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div><!-- card -->
Places an image to the top of the card.
Places an image to the bottom of the card.
Turn an image into a card background and overlay your card’s text.
Source Code
<div class="card bd-0">
<img class="card-img img-fluid" src="../img/img11.jpg" alt="Image">
<div class="card-img-overlay pd-30 d-flex align-items-start flex-column">
<h6 class="tx-white mg-b-15">The Green Leaves</h6>
<p class="tx-white tx-white-7 mg-b-auto">...</p>
<p class="mg-b-0"><a href="" class="tx-white">Read more</a></p>
</div><!-- card-img-overlay -->
</div><!-- card -->
Add an optional header within a card.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Source Code
<div class="card bd-0">
<div class="card-header card-header-default bg-primary">
Description
</div><!-- card-header -->
<div class="card-body bd bd-t-0 rounded-bottom">
...
</div><!-- card-body -->
</div><!-- card -->
Add an optional footer within a card.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Source Code
<div class="card">
<div class="card-body color-gray-lighter">...</div>
<div class="card-footer">
...
</div><!-- card-footer -->
</div><!-- card -->
Add a navigation in header of a card.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...
Source Code
<div class="card bd-0">
<div class="card-header bg-dark">
<ul class="nav nav-tabs nav-tabs-for-dark card-header-tabs">
<li class="nav-item">
<a class="nav-link bd-0 active pd-y-8" href="#">Popular</a>
</li>
<li class="nav-item">
<a class="nav-link bd-0 tx-gray-light" href="#">Recent</a>
</li>
</ul>
</div><!-- card-header -->
<div class="card-body">...</div>
</div><!-- card -->
Cards include their own variant classes for quickly changing card background.
Source Code
<div class="card card-body tx-white bg-dark bd-0">
Some quick example text to build on the card title...
</div><!-- card -->
Cards with some options in the right corner of header of card.