Bootstrap 5 Tutorial
BS5 Card
Previous Page
Next Page

Bootstrap Cards

Bootstrap cards are box container that have default padding. It has three components namely the .card-header,.card-body,.card-footer.

  • The .card-title class is used to make heading title inside the .card-header element.
  • .card-text is used to Write text information inside the .card-body.
  • The .card-link class is used to the link (<a>) element that exists either in .card-body or .card-footer.
  • Following components like text content, images, list-group, navs, links, etc. can be put inside the card.

Basic Card

Steps to create a basic card:

  • Assign .card class to the card container.
  • Add .card-body class to the card child element's base class.
  • Assign .card-text class to the <div> and place all the text information inside it and put it into the .card-body section.

General Syntax 

      <div class="card">
  <div class="card-body">
    <p class="card-text">Card body section consists of text information, images, link, list-group, navs etc.</p>
  </div>
</div>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Bootstrap Basic Card</h2>
  <div class="row">
    <div class="col-12 col-sm-8 offset-sm-2">
      <div class="card">
        <div class="card-body">
          <p class="card-text">Card body section consists of text information,images,link,list-group,navs etc.</p>
        </div>
      </div>
    </div>
    <!--/offset-sm-2-->
  </div>
  <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Basic Card

Card body section consists of text information,images,link,list-group,navs etc.

Card: Header and Footer

Steps to create a card having a card header and footer:

  • Assign .card class to the card container.
  • Place card heading content inside the card having .card-header class.
  • Write content inside the card having .card-body class.
  • Place card footer information inside the card having .card-footer class.
  • Please keep in mind that card heading can be created by assigning .card-title to any heading element (<h1> to <h6>) element's base class while card link can be created by assigning .card-link class to the <a> element's base class. A card heading can be placed inside the card header and card body while a card link can be placed inside the card body and card footer.

General Syntax 

      <div class="card">
  <div class="card-header"></div>
  <div class="card-body"></div>
  <div class="card-footer"></div>
</div>
<!--/card-->
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Bootstrap Card With Header And Footer</h2>
  <div class="row">
    <div class="col-12 col-sm-8 offset-sm-2">
      <div class="card">
        <div class="card-header">Bootstrap card Heading</div>
        <div class="card-body">
          <p class="card-text">Bootstrap card can support text information, images, link, list-group, navs, etc.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="card-link">card-link 1</a>
          <a href="#" class="card-link">card-link 2</a>
        </div>
      </div>
      <!--/card-->
    </div>
    <!--/offset-sm-2-->
  </div>
  <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Card With Header And Footer

Bootstrap card Heading

Bootstrap card can support text information, images, link, list-group, navs, etc.

card-link 1 card-link 2

Card Titles, text, and links

Steps to create a card with title, text, and link:

  • Keep in mind that,.card-title is assigned to <h*> tag means <h1> to the <h6>
  • Place .card-link to the <a> element base class.
  • To create subtitles inside the card, assign .card-subtitle to the <h*> element base class.

General Syntax 

      <div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Write card text content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
Try it now

Source Code 

          <div class="container text-center mt-5">
  <h2 class="text-center">Bootstrap Card With Card Title,Subtitle,Contents & card link</h2>
  <div class="row">
    <div class="col-12 col-sm-8 offset-sm-2">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p class="card-text">Write card text content.</p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
        </div>
      </div>
    </div>
    <!--/offset-sm-2-->
  </div>
  <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Card With Card Title,Subtitle,Contents & card link

Card title
Card subtitle

Write card text content.

Card link Another link

Card Background Color

The card background color is assigned by applying background utility classes. These classes are .bg-primary, .bg-info,.bg-success,.bg-danger, .bg-warning,.bg-dark,.bg-light,.bg-secondary.

General Syntax 

      <div class="card bg-primary">
 <div class="card-body">
  <p class="card-text">Bootstrap card can support text information, images, link, list-group, navs, etc.</p>
 </div>
</div>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Bootstrap Colored Card</h2>
  <div class="row">
    <div class="col-12 col-sm-8 offset-sm-2">
      <div class="card bg-primary mb-2">
        <div class="card-body">
          <p class="card-text">Bootstrap card can support text information, images, link, list-group, navs, etc.</p>
        </div>
      </div>
      <div class="card bg-danger mb-2">
        <div class="card-body">
          <p class="card-text">Bootstrap card can support text information,images,link,list-group,navs etc.</p>
        </div>
      </div>
    </div>
    <!--/offset-sm-2-->
  </div>
  <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Colored Card

Bootstrap card can support text information, images, link, list-group, navs, etc.

Bootstrap card can support text information,images,link,list-group,navs etc.

Code Explanation

To provide different color to the card, assign background color utility classes(.bg-*) to the card container base class.

Card Border and Text Color

Step to assign card border and text color:

  • Std: To assign card border color add .border-* contextual class to card container base class.

The card border and text color can be changed by providing the following contextual classes to the parent container that has class .card. These contextual classes are .border-primary,.border-secondary,.border-success,.border-danger,.border-warning,.border-info,.border-light,.border-dark,.border-warning.

General Syntax 

      <div class="card border-primary mb-4">
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Write down card content.</p>
  </div>
</div>
Try it now

Source Code 

          <div class="container">
 <h2 class="text-center">Bootstrap Card Border & Text Color</h2>
 <div class="row">
  <div class="col-12 col-sm-8 offset-sm-2">
   <div class="row">
    <div class="col-sm-6">
     <div class="card border-primary mb-4">
      <div class="card-body text-primary">
       <h5 class="card-title">Primary card title</h5>
       <p class="card-text">Here, write down card text. </p>
      </div>
     </div>
    </div>
    <div class="col-sm-6">
     <div class="card border-secondary mb-4">
      <div class="card-body text-secondary">
       <h5 class="card-title">Secondary card title</h5>
       <p class="card-text">Write down, secondary card content, here.</p>
      </div>
     </div>
    </div>
   </div>
  </div>
  <!--/offset-sm-2-->
 </div>
 <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Card Border & Text Color

Primary card title

Here, write down card text.

Secondary card title

Write down, secondary card content, here.

Card Types

1.0 Simple Card

Bootstrap 5 simple card container contains the .card class while its immediate child element contains .card-body class.

General Syntax 

      <div class="card">
  <div class="card-body">Basic card</div>
</div>
Try it now

Source Code 

          <div class="container">
 <h2 class="text-center">Bootstrap Basic Card</h2>
 <div class="row">
  <div class="col-12 col-sm-8 offset-sm-2">
   <div class="card">
    <div class="card-body">Basic card</div>
   </div>
  </div>
  <!--/offset-sm-2-->
 </div>
 <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Basic Card

Basic card

2.0 Bootstrap Card With Header

Bootstrap card container contains .card class while child element contains .card-body, and .card-header class.

General Syntax 

      <div class="card">
 <div class="card-header">Header</div>
 <div class="card-body">Content</div>
</div>
Try it now

Source Code 

          <div class="container">
 <h2 class="text-center">Bootstrap Card With Header</h2>
 <div class="row">
  <div class="col-12 col-sm-8 offset-sm-2">
   <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div>
   </div>
  </div>
  <!--/offset-sm-2-->
 </div>
 <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Card With Header

Header
Content

3.0 Bootstrap Card With Header And Footer

Bootstrap card container contains .card class while as child element contains .card-body , .card-header, and .card-footer class.

General Syntax 

      <div class="card">
 <div class="card-header">Header</div>
 <div class="card-body">Content</div>
 <div class="card-footer">Footer</div>
</div>
Try it now

Source Code 

          <div class="container mt-5">
 <h2 class="text-center">Bootstrap Card Having header, body and footer section.</h2>
 <div class="row">
  <div class="col-12 col-sm-8 offset-sm-2">
   <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div>
    <div class="card-footer">Footer</div>
   </div>
  </div>
  <!--/offset-sm-2-->
 </div>
 <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Card Having header, body and footer section.

Header
Content
Footer

4.0 Bootstrap Card With Header, Footer, And Link

Bootstrap 5 card container contains .card class while as child element contains .card-body, .card-header, and .card-footer. Please keep in mind that the .card-title can be used inside the .card-header, and .card-footer containers. The .card-link can be used inside .card-body, and card-footer containers.

General Syntax 

      <div class="card">
 <div class="card-header">Card Header Section</div>
 <div class="card-body">
  <h4 class="card-title">Card title</h4>
  <p class="card-text">Write card text information.</p>
  <a href="#" class="card-link">Card link</a>
  <a href="#" class="card-link">Another link</a>
 </div>
</div>
Try it now

Source Code 

          <div class="container">
 <h2 class="text-center">Bootstrap Card Having header,body and footer & link section.</h2>
 <div class="row">
  <div class="col-12 col-sm-8 offset-sm-2">
   <div class="card">
    <div class="card-header">Card Header Section</div>
    <div class="card-body">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">Write card text information.</p>
     <div class="card-footer">
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
     </div>
    </div>
   </div>
  </div>
  <!--/offset-sm-2-->
 </div>
 <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Card Having header,body and footer & link section.

Card Header Section

Card title

Write card text information.

Card link Another link

Stretched Card Link

To make the whole Bootstrap 5 cards clickable, use .stretched-link class to the element having .card-link.

General Syntax 

      <a href="#" class="btn btn-primary stretched-link">See Profile</a>
Try it now

Source Code 

          <div class="container">
 <h2 class="text-center">Bootstrap Stretched Link</h2>
 <div class="row">
  <div class="col-12 col-sm-8 offset-sm-2">
   <div class="card">
    <div class="card-header">Card Header Section</div>
    <div class="card-body">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">Write card text information.</p>
     <div class="card-footer">
      <a href="#" class="btn btn-primary stretched-link">See Profile</a>
     </div>
    </div>
   </div>
  </div>
  <!--/offset-sm-2-->
 </div>
 <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Stretched Link

Card Header Section

Card title

Write card text information.

See Profile

Case1:Placing image at the top of the card

To place the image at the top of the card, use the .card-img-top class to the <img> element's base class.

General Syntax 

      <div class="card" style="width: 400px;">
 <img class="card-img-top" src="https://picsum.photos/seed/picsum/200/300" alt="Card image" />
 <div class="card-body">
  <h4 class="card-title">Card Title</h4>
  <p class="card-text">Card text.</p>
  <a href="#" class="btn btn-primary">Card link</a>
 </div>
</div>
<!--/card-->
Try it now

Source Code 

          <div class="container mt-5">
 <h2 class="text-center">Bootstrap Card With Image</h2>
 <div class="row">
  <div class="col-12 col-sm-8 offset-sm-2">
   <div class="card" style="width: 400px;">
    <img class="card-img-top" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" />
    <div class="card-body">
     <h4 class="card-title">Card Title</h4>
     <p class="card-text">Card text.</p>
     <a href="#" class="btn btn-primary">Card link</a>
    </div>
   </div>
   <!--/card-->
  </div>
  <!--/offset-sm-2-->
 </div>
 <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Card With Image

Card image

Card Title

Card text.

Card link

Case2:Placing image at the bottom of the card

To place image at the top of the card, use .card-img-bottom to the <img> base class.

General Syntax 

      <div class="card" style="width: 450px;">
 <div class="card-body">
  <h4 class="card-title">Card Title</h4>
  <p class="card-text">Write card text here.</p>
  <a href="../../code-editor/461" class="btn btn-primary">Get more info</a>
 </div>
 <img class="card-img-bootom" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" style="width: 100%;" />
</div>
Try it now

Source Code 

          <div class="container mt-5">
 <h2 class="text-center">Bootstrap Card With Image</h2>
 <div class="row">
  <div class="col-12 col-sm-8 offset-sm-2">
   <div class="card" style="width: 450px;">
    <div class="card-body">
     <h4 class="card-title">Card Title</h4>
     <p class="card-text">Write card text here.</p>
     <a href="#" class="btn btn-primary">Get more info</a>
    </div>
    <img class="card-img-bootom" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" style="width: 100%;" />
   </div>
   <!--/card-->
  </div>
  <!--/offset-sm-2-->
 </div>
 <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Bootstrap Card With Image

Card Title

Write card text here.

Get more info
Card image

Code Explanation

Place image at the bottom of the card assign.card-img-bottom to the <img> element base class.

Case3:Placing image as a background of the card

To place an image into a card's background, use .card-img-overlay class.

General Syntax 

      <div class="card" style="width: 400px;">
 <img class="card-img-top" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" />
 <div class="card-img-overlay">
  <h4 class="card-title">Card Title</h4>
  <p class="card-text">Write card text information.</p>
  <a href="#" class="btn btn-primary">Card link</a>
 </div>
</div>
Try it now

Source Code 

          <div class="container mt-5">
 <h2 class="text-center">
  Placing image as a background of the card.
 </h2>
 <div class="row">
  <div class="col-12 col-sm-8 offset-sm-2">
   <div class="card" style="width: 400px;">
    <img class="card-img-top" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" />
    <div class="card-img-overlay">
     <h4 class="card-title">Card Title</h4>
     <p class="card-text">Write card text information.</p>
     <a href="#" class="btn btn-primary">Card link</a>
    </div>
   </div>
  </div>
  <!--/offset-sm-2-->
 </div>
 <!--/row-->
</div>
<!--/container-->
Try it now

Source Code : Output

Placing image as a background of the card.

Card image

Card Title

Write card text information.

Card link

Online Test / Quiz

Question set 1

Web Tutorials

Bootstrap Cards
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Tutorials HTML JAVASCRIPT CSS BOOTSTRAP 5
Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
Practical Approach Coaching Software Computer Software Skill Management Software School Management Software