Bootstrap Cards

In bootstrap a card is like container but it is extensible and flexible. It can be used for various purpose like header and footer. It also has contextual background properties.

Basic cards

In this example card is used to make a basic card while it's width is specified with CSS width property.

<div class="card" style="width: 15rem;">
  <img class="card-img-top" src="img/blog-img/lb-3.jpg" alt="image for card">
  <div class="card-body">
    <h5 class="card-title">Bootstrap 4</h5>
    <p class="card-text">
      This is the course of bootstrap 4. Explore more about this course.
    </p>
      <a href="#" class="btn btn-primary">Read more</a>
  </div>
</div>

Output of above code

image for card
Bootstrap 4

This is the course of bootstrap 4. Explore more about this course.


List groups in card

In this example a list group is make made inside a card.

<div class="card" style="width: 15rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item"> Item A </li>
    <li class="list-group-item"> Item B </li>
    <li class="list-group-item"> Item C </li>
    <li class="list-group-item"> Item D </li>
  </ul>
</div>

Output of above code

  • Item A
  • Item B
  • Item C
  • Item D


Header and Footer

In this example two classes are card-header and card-footer. Here card-header class is used for header area and card-footer is used to make footer area.

<div class="card text-center">
  <div class="card-header">
    Header
  </div>
  <div class="card-body">
    <h5 class="card-title">Webtags.com.pk</h5>
    <p class="card-text">
    Webtags.com.pk is the best academy for web development courses.
    </p>
    <button  class="btn btn-primary">Read more</button>
  </div>
  <div class="card-footer text-muted">
    Copyright ©2020-2021
</div> </div>

Output of above code

Header
Webtags.com.pk

Webtags.com.pk is the best academy for web development courses.


Contextual cards

In this example many contextual classes are used to apply some background colors to the cards.

<div class="card">
  <div class="card-body">Basic card</div>
</div>
<div class="card bg-primary text-white">
  <div class="card-body">bg-primary</div>
</div>
<div class="card bg-success text-white">
  <div class="card-body">bg-success</div>
</div>
<div class="card bg-info text-white">
  <div class="card-body">bg-info</div>
</div>
<div class="card bg-warning text-white">
  <div class="card-body">bg-warning</div>
</div>
<div class="card bg-danger text-white">
  <div class="card-body">bg-danger</div>
</div>
<div class="card bg-secondary text-white">
  <div class="card-body">bg-secondary</div>
</div>
<div class="card bg-dark text-white">
  <div class="card-body">bg-dark</div>
</div>
<div class="card bg-light text-white">
  <div class="card-body">bg-light</div>
</div>

Output of above code

Basic card

bg-primary

bg-success

bg-info

bg-warning

bg-danger

bg-secondary

bg-dark

bg-light


Navigation cards

In this example nav class is used make navigation with some links.

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Contact</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Webtags.com.pk</h5>
    <p class="card-text">
    Webtags.com.pk is the best academy for web development courses.
    </p>
    <button class="btn btn-primary">Read more</button>
  </div>
</div>

Output of above code

Webtags.com.pk

Webtags.com.pk is the best academy for web development courses.








The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.