Cards
Example 1
Source Code
<div class="card">
<!-- Card Image -->
<img class="card-img-top" src="assets/images/card/skateboard.jpeg" alt="Skateboard">
<!-- /card image -->
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Card title</h2>
<!-- Card Title-->
<!-- Card Text-->
<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>
<!-- /card text-->
<!-- Card Button-->
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
<!-- /card button-->
</div>
<!-- /card body -->
</div>
Example 2
Source Code
<div class="card">
<!-- Card Body -->
<div class="card-body">
<!-- Card Text-->
<p class="card-text">
This is some text within a card body. Use it wisely :)
</p>
<!-- /card text-->
</div>
<!-- /card body -->
</div>
Example 3
Source Code
<div class="card">
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Titles & Links</h2>
<!-- Card Title-->
<!-- Card Sub Title-->
<h4 class="card-subtitle">Subtitle text</h4>
<!-- /card sub title-->
<!-- Card Text-->
<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>
<!-- /card text-->
<!-- Card Link-->
<a href="javascript:void(0)" class="card-link">Goto Link</a>
<a href="javascript:void(0)" class="card-link">Another Link</a>
<!-- /card link-->
</div>
<!-- /card body -->
</div>
Example 4
Source Code
<div class="card">
<!-- Card Image -->
<img class="card-img-top" src="assets/images/card/vegetable.jpeg" alt="Vegetable">
<!-- /card image -->
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Kitchen Sink</h2>
<!-- Card Title-->
<!-- Card Text-->
<p class="card-text lead">
Mix and match multiple content types...
</p>
</div>
<!-- /card body -->
<!-- List Group -->
<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>
</ul>
<!-- /list group-->
<!-- Card Body -->
<div class="card-body">
<!-- Card Button-->
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
<a href="javascript:void(0)" class="card-link">Card Link</a>
<!-- /card button-->
</div>
<!-- /card body -->
</div>
Example 5
Source Code
<div class="card">
<!-- Card header -->
<div class="card-header">
<ul class=" card-header-pills nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-pane3" role="tab" aria-controls="tab-pane1" aria-selected="true">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-pane4" role="tab" aria-controls="tab-pane2" aria-selected="true">Link</a>
</li>
<li class="nav-item"><a href="javascript:void(0)" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
<!-- /card header -->
<!-- Tab Content-->
<div class="tab-content">
<!-- Tab panel -->
<div id="tab-pane3" class="tab-pane active">
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Tabs In Button Style</h2>
<!-- Card Title-->
<!-- Card Text-->
<p class="card-text">
Mix and match multiple content types to create the card you need, or
throw everything in there.
</p>
<!-- /card text-->
<!-- Card Link-->
<a href="javascript:void(0)" class="card-link">Goto Link</a>
<!-- /card link-->
</div>
<!-- /card body -->
</div>
<!-- /tab panel -->
<!-- Tab panel -->
<div id="tab-pane4" class="tab-pane">
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Tabs In Button Style</h2>
<!-- Card Title-->
<!-- Card Text-->
<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>
<!-- /card text-->
<!-- Card Link-->
<a href="javascript:void(0)" class="card-link">Goto Link</a>
<!-- /card link-->
</div>
<!-- /card body -->
</div>
<!-- /tab panel -->
<!-- Tab panel -->
<div class="tab-pane">
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Tabs In Button Style</h2>
<!-- Card Title-->
<!-- Card Text-->
<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>
<!-- /card text-->
<!-- Card Link-->
<a href="javascript:void(0)" class="card-link">Goto Link</a>
<!-- /card link-->
</div>
<!-- /card body -->
</div>
<!-- /tab panel -->
</div>
<!-- /tab content-->
</div>
Example 6
Source Code
<div class="card">
<!-- Card header -->
<div class="card-header card-nav">
<ul class="card-header-tabs nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-pane1" role="tab" aria-controls="tab-pane1" aria-selected="true">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-pane2" role="tab" aria-controls="tab-pane2" aria-selected="true">Link</a>
</li>
<li class="nav-item"><a href="javascript:void(0)" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
<!-- /card header -->
<!-- Tab Content-->
<div class="tab-content">
<!-- Tab panel -->
<div id="tab-pane1" class="tab-pane active">
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Card With Tabs</h2>
<!-- Card Title-->
<!-- Card Text-->
<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>
<!-- /card text-->
<!-- Card Link-->
<a href="javascript:void(0)" class="card-link">Goto Link</a>
<!-- /card link-->
</div>
<!-- /card body -->
</div>
<!-- /tab panel -->
<!-- Tab panel -->
<div id="tab-pane2" class="tab-pane">
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Card With Tabs</h2>
<!-- Card Title-->
<!-- Card Text-->
<p class="card-text">
Mix and match multiple content types to create the card you need, or
throw everything in there.
</p>
<!-- /card text-->
<!-- Card Link-->
<a href="javascript:void(0)" class="card-link">Goto Link</a>
<!-- /card link-->
</div>
<!-- /card body -->
</div>
<!-- /tab panel -->
<!-- Tab panel -->
<div class="tab-pane">
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Card With Tabs</h2>
<!-- Card Title-->
<!-- Card Text-->
<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>
<!-- /card text-->
<!-- Card Link-->
<a href="javascript:void(0)" class="card-link">Goto Link</a>
<!-- /card link-->
</div>
<!-- /card body -->
</div>
<!-- /tab panel -->
</div>
<!-- /tab content-->
</div>
Example 7
Source Code
<div class="card text-white">
<!-- Card Image -->
<img class="card-img" src="assets/images/card/person-walking.jpeg" alt="Person">
<!-- /card image -->
<!-- Card Overlay -->
<div class="card-img-overlay">
<!-- Card Header -->
<h2 class="card-title text-white">Card title</h2>
<!-- /card header -->
<!-- Card Text -->
<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>
<!-- /card text -->
</div>
<!-- /card overlay -->
</div>
Example 8
Source Code
<div class="card text-white bg-primary">
<!-- Card Header -->
<h4 class="card-header text-white">Header</h4>
<!-- /card header -->
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title text-white">Header & Footer</h2>
<!-- Card Title-->
<!-- Card Text-->
<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>
<!-- /card text-->
</div>
<!-- /card body -->
<!-- Card Footer -->
<div class="card-footer">2 days ago | footer content</div>
<!-- /card footer -->
</div>
Last modified 3yr ago