Elements
These modular elements can be readily used and customized across pages and in different blocks.
Cards <> show code
<!-- Default Card style -->
<div class="card">
<div class="card_img">
<a href=""><img class="img-full" src="..." alt="Card image"></a>
</div>
<div class="card-block">
<a href="#"><h3 class="card-title">Card title</h3></a>
<span>tagline</span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
<a href="" class="btn btn-primary">Read more</a>
</div>
</div>
<!-- image in the middle -->
<div class="card img-mid">
<div class="card-block">
<a href="#"><h3 class="card-title">Card title</h3></a>
<span>card tagline</span>
<div class="card_img">
<a href=""><img class="img-full" src="..." alt="Card image"></a>
</div>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
<a href="" class="btn btn-primary">Read more</a>
</div>
</div>
<!-- image at the bottom -->
<div class="card img-bottom">
<div class="card-block">
<a href="#"><h3 class="card-title">Card title</h3></a>
<span>card tagline</span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
<a href="" class="btn btn-primary">Read more</a>
</div>
<div class="card_img">
<a href=""><img class="img-full" src="..." alt="Card image"></a>
</div>
</div>
<!-- Overlay contents on image -->
<div class="card card-inverse">
<img class="card-img" src="img/blog/card.jpg" alt="Card image">
<div class="card-img-overlay">
<h3 class="card-title">Card with overlay</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consec tetur adipisicing elit sed.</p>
</div>
</div>
How to use
Card is a super content container in bootstrap 4. Here’s how to use it:
- Wrap all content in the .card wrapper
- Use .card_img as image wrapper
- By default card image are top aligned. For middle and bottom aligned image use .img-mid and .img-bottom with .card
- The .card-inverse sets an overlay on image. The contents should be wrapped into .card-img-overlay
Example:
Card title
by Admin | 0 ComtsLorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor
Read moreCard title
by Admin | 0 ComtsLorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor
Read moreCard title
by Admin | 0 ComtsLorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor
Read moreCard Example Two <> show code
How to use
Julia Robertson
Co-FounderCard Deck <> show code
<div class="card-deck">
<div class="card">
<div class="card_img">
<a href=""><img class="img-full" src="img/blog/blog1.jpg" alt="Card image"></a>
</div>
<div class="card-block">
<a href="#"><h3 class="card-title">Card title</h3></a>
<span>by <span><a href="" class="text-primary" >Admin</a> </span></span> | <span><a href="">0 Comts</a></span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
<a href="" class="btn btn-primary">Read more</a>
</div>
</div>
<div class="card">
<div class="card_img">
<a href=""><img class="img-full" src="img/blog/blog1.jpg" alt="Card image"></a>
</div>
<div class="card-block">
<a href="#"><h3 class="card-title">Card title</h3></a>
<span>by <span><a href="" class="text-primary" >Admin</a> </span></span> | <span><a href="">0 Comts</a></span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
<a href="" class="btn btn-primary">Read more</a>
</div>
</div>
<div class="card">
<div class="card_img">
<a href=""><img class="img-full" src="img/blog/blog1.jpg" alt="Card image"></a>
</div>
<div class="card-block">
<a href="#"><h3 class="card-title">Card title</h3></a>
<span>by <span><a href="" class="text-primary" >Admin</a> </span></span> | <span><a href="">0 Comts</a></span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
<a href="" class="btn btn-primary">Read more</a>
</div>
</div>
</div>
How to use
- Wrap all card contents in .card-deck wrapper. Each of the cards in card deck uses base card styles
Example:
Card title
by Admin | 0 ComtsLorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor
Read moreCard title
by Admin | 0 ComtsLorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor
Read moreCard title
by Admin | 0 ComtsLorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor
Read more