Bootstrap 4 Cards, How To Learn Bootstrap 4 Cards Tutorial

Bootstrap 4 Tutorial

Bootstrap 4 Cards

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

A bootstrap card it includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Basic Card

To create a basic card, apply the .card and .card-body classes to an element to create the outer card container.

<div class="card">
  <div class="card-body">Basic card</div>
</div>

Output :

Header and footer

Add an optional header and/or footer within a card. Add .card-title to any heading elements and .card-text to text elements.

<div class="card">
  <div class="card-header">
    Free Time Learning
  </div>
  <div class="card-body">
    <h4 class="card-title">F T L (www.freetimelearning.com)</h4>
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <a href="#" class="btn btn-primary">Click Here!</a>
  </div>
</div>

Output :

Card headers can be styled by adding .card-header to <h*> elements.

<div class="card">
  <h4 class="card-header">Free Time Learning</h4>
  <div class="card-body">
    <h4 class="card-title">F T L (www.freetimelearning.com)</h4>
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <a href="#" class="btn btn-primary">Click Here!</a>
  </div>
</div>

Output :

Header and Footer

<div class="card text-center">
  <div class="card-header"> Free Time Learning </div>
  <div class="card-body">
    <h4 class="card-title">F T L (www.freetimelearning.com)</h4>
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <a href="#" class="btn btn-primary">Click Here!</a>
  </div>
  <div class="card-footer text-muted">
	Designed by <a href="http://www.freetimelearning.com" target="_blank">F T L</a>
  </div>
</div>

Output :

Images

.card-img-top places an image to the top of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="../images/content/images-3.jpg" alt="Free Time Learning">
  <div class="card-body">
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	<a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank" class="card-link">
		Bootstrap 3
	</a>
    <a href="http://www.freetimelearning.com/bootstrap-4-tutorial.php" target="_blank" class="card-link">
		Bootstrap 4
	</a>
  </div>
</div>

Output :

List groups

Create lists of content in a card with a flush list group.

<div class="card" style="width: 20rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">HTML5</li>
    <li class="list-group-item">CSS3</li>
    <li class="list-group-item">Bootstrap 3</li>
  </ul>
</div>

Output :

<div class="card" style="width: 20rem;">
  <div class="card-header"> Free Time Learning </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">HTML5</li>
    <li class="list-group-item">CSS3</li>
    <li class="list-group-item">Bootstrap 3</li>
	<li class="list-group-item">Bootstrap 4</li>
  </ul>
</div>

Output :

Contextual Cards

The bootstrap 4 card background colors, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

<div class="row">
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-dark mb-3" style="max-width: 25rem;">
		  <div class="card-header">Basic card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-white bg-primary mb-3" style="max-width: 25rem;">
		  <div class="card-header">Primary card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-white bg-success mb-3" style="max-width: 25rem;">
		  <div class="card-header">Success card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-white bg-info mb-3" style="max-width: 25rem;">
		  <div class="card-header">Info card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-white bg-warning mb-3" style="max-width: 25rem;">
		  <div class="card-header">Warning card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-white bg-danger mb-3" style="max-width: 25rem;">
		  <div class="card-header">Danger card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-white bg-secondary mb-3" style="max-width: 25rem;">
		  <div class="card-header">Secondary card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-white bg-dark mb-3" style="max-width: 25rem;">
		  <div class="card-header">Dark card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-dark bg-light mb-3" style="max-width: 25rem;">
		  <div class="card-header">Light card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>

</div>

Output :

Border Cards

Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.

<div class="row">
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card border mb-3" style="max-width: 25rem;">
		  <div class="card-header">Basic card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>

	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-primary border-primary mb-3" style="max-width: 25rem;">
		  <div class="card-header">Primary card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-success border-success mb-3" style="max-width: 25rem;">
		  <div class="card-header">Success card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-info border-info mb-3" style="max-width: 25rem;">
		  <div class="card-header">Info card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-warning border-warning mb-3" style="max-width: 25rem;">
		  <div class="card-header">Warning card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-danger border-danger mb-3" style="max-width: 25rem;">
		  <div class="card-header">Danger card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-secondary border-secondary mb-3" style="max-width: 25rem;">
		  <div class="card-header">Secondary card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-dark border-dark mb-3" style="max-width: 25rem;">
		  <div class="card-header">Dark card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>
	<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
		<div class="card text-dark border-light mb-3" style="max-width: 25rem;">
		  <div class="card-header">Light card</div>
		  <div class="card-body">
			<h4>Free Time Learning</h4>
			<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		  </div>
		</div>
	</div>

</div>

Output :

Image caps

Bootstrap 4 image caps are “image caps”—images at the top or bottom of a card.

<div class="card mb-3">
  <img class="card-img-top" src="../images/content/images-4.jpg" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Free Time Learning</h4>
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="card-text"><small class="text-muted">Last updated : 21/12/2017</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
     <h4 class="card-title">Free Time Learning</h4>
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="card-text"><small class="text-muted">Last updated : 21/12/2017</small></p>
  </div>
  <img class="card-img-bottom" src="../images/content/images-3.jpg" alt="Card image cap">
</div>

Output :

Image Overlay

Turn an image into a card background and use .card-img-overlay to add text on top of the image

<div class="card img-fluid">
    <img class="card-img-top" src="../images/content/images-4.jpg" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title text-white">Free Time Learning</h4>
      <p class="card-text text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <a href="#" class="btn btn-primary">Click Here!</a>
    </div>
</div>

Output :

Navigation

Add some navigation to a card’s header (or block) with Bootstrap’s nav components.

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">HTML5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CSS3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Bootstrap</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">HTML</h4>
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <a href="#" class="btn btn-primary">Click Here!</a>
  </div>
</div>

Output :

Card groups

Bootstrap 4 card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Free Time Learning</h4>
      <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <p class="card-text"><small class="text-muted">Last updated 21/12/2017</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Free Time Learning</h4>
      <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <p class="card-text"><small class="text-muted">Last updated 21/12/2017</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Free Time Learning</h4>
      <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <p class="card-text"><small class="text-muted">Last updated 21/12/2017</small></p>
    </div>
  </div>
</div>

Output :

Card decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Title</h4>
      <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 21/12/2017</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Title</h4>
      <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 21/12/2017</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Title</h4>
      <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 21/12/2017</small>
    </div>
  </div>
</div>

Output :

Bootstrap 4 Tutorial