Cards
Bootnews cards provide a flexible and extensible content container with multiple variants and options.
About
A card is a flexible and extensible Bootstrap content container. Bootnews has taken the advantage of Bootstrap's Cards and created more classes to make easier to control them on various circumstances.
Card Full
Use .card-full class to remove border and background from card.
Default Card
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card with .card-full
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div class="card card-full">
<!--thumbnail-->
<a href="#">
<img class="card-img" src="../../assets/img/360x202/img1.jpg" alt="Image description">
</a>
<div class="card-body">
<!--title-->
<h2 class="card-title">
<a href="#">Default Card</a>
</h2>
<!-- author, date & comments -->
<div class="card-text mb-2 text-muted small">
<span class="d-none d-sm-inline me-1">
<a class="font-weight-bold" href="#">John Doe</a>
</span>
<time datetime="2019-10-22">Oct 22, 2019</time>
<span title="9 comment" class="float-right">
<span class="fa fa-comments" aria-hidden="true"></span> 9
</span>
</div>
<!--description-->
<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>
</div>
</div>
Card Horizontal
Card full also can add in card horizontal.
Card Horizontal
This is a wider card with supporting text below as a natural lead-in to additional content...
Read more
Card Horizontal with .card-full
This is a wider card with supporting text below as a natural lead-in to additional content...
Read more
<div class="card card-full">
<div class="row">
<div class="col-sm-6 mb-2">
<!-- thumbnail -->
<a href="#">
<img class="card-img" src="../../assets/img/360x202/img8.jpg" alt="Image description">
</a>
</div>
<div class="col-sm-6 mb-2">
<div class="card-body pt-4 pt-sm-0">
<!--title-->
<h2 class="card-title">
<a href="#">Card Horizontal with .card-full</a>
</h2>
<!-- author, date & comments -->
<div class="card-text mb-2 text-muted small">
<span class="d-none d-sm-inline me-1">
<a class="font-weight-bold" href="#">John Doe</a>
</span>
<time datetime="2019-10-21">Oct 21, 2019</time>
<span title="5 comment" class="float-right">
<span class="fa fa-comments" aria-hidden="true"></span> 5
</span>
</div>
<!--description-->
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content...</p>
<!--read more button-->
<a class="btn btn-outline-primary" href="#">Read more</a>
</div>
</div>
</div>
</div>
You can read full documentation about card in Bootstrap Documentation