ildar-k
3/21/2019 - 10:12 AM
cards
<!-- BLOCK -->
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, voluptate.
</div>
</div>
<br>
<br>
<!-- SIMPLE CARD -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle text-muted">Card subtitle</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
<a class="btn btn-outline-primary" href="#">Read More</a>
</div>
</div>
<br>
<br>
<!-- CARD WITH IMAGE -->
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x200" alt="">
<div class="card-body class="card-title"">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
<a class="btn btn-outline-primary" href="#">Read More</a>
</div>
</div>
<br>
<br>
<!-- CARD WITH HEADER -->
<div class="card">
<div class="card-header">
My Card
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
<a class="btn btn-outline-primary btn-block" href="#">Read More</a>
</div>
</div>
<br>
<br>
<!-- HEADER, FOOTER, CENTERED -->
<div class="card text-center">
<div class="card-header">
My Card
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
<a class="btn btn-outline-primary" href="#">Read More</a>
</div>
<div class="card-footer text-muted">
2 Days Ago
</div>
</div>
<br>
<br>
<!-- CARD WITH NAV -->
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
<a href="#">Read More</a>
</div>
</div>
<br>
<br>
<!-- IMAGE OVERLAYS -->
<div class="card">
<img class="card-img" src="https://source.unsplash.com/random/1000x300" alt="">
<div class="card-img-overlay">
<h4 class="card-title">Card title</h4>
<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">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<br>
<br>
<!-- BACKGROUND COLOR -->
<div class="card bg-primary text-white mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="card bg-danger text-white mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="card bg-info text-white mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Danger card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Warning card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Info card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Light card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Dark card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<br>
<br>
<!-- CARD OUTLINE -->
<div class="card border-info">
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Secondary card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Success card title</h4>
<p>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>Header</div>
<div>
<h4>Danger card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Warning card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Info card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Light card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div>
<div>Header</div>
<div>
<h4>Dark card title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<br>
<br>
<!-- CARD GROUP -->
<div class="card-columns">
<div class="card">
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
</div>
<br>
<br>
<!-- CARD DECK -->
<div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
</div>
<br>
<br>
<!-- CARD COLUMNS -->
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="https://source.unsplash.com/random/300x200" alt="">
<div class="card-body">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="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.</p>
</div>
</div>
<div class="card p-3">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small>
Someone famous in
<cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://source.unsplash.com/random/301x200" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">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">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="card-text">
<small class="text-muted">
Someone famous in
<cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">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 img-fluid" src="https://source.unsplash.com/random/302x200" alt="">
</div>
<div class="card bg-dark text-white p-3">
<blockquote class="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in
<cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card bg-primary text-white">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="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.</p>
<p class="card-text">
<small class="text-white">Last updated 3 mins ago</small>
</p>
</div>
</div>