Bootstrap Cards

Basically, Bootstrap cards are a box container that has by default padding. It has mainly three components namely .card-header,.card-body,.card-footer.

Std:.card-title class is used to make heading inside the .card-header element.
Std:.card-text Write text information within the container having .card-body.
Std:Add .card-link to the link(<a>)element that is exist either in .card-body or .card-footer.
Std: Following components like text content,images,list-group,navs,link etc can be put inside card.

Basic Card

Steps to create basic card:

Step1:Assign .card to the card container.
Step2: Assign .card-body to the card child element base class.
Step3: Assign .card-text to the <div> and place all text information inside it and put it into .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 my-4">
  <div class="card p-4">
    <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>

Try it yourself

Source Code : Output

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

Note: To create bootstrap basis card,assign .card to the card container and assign .card-body to the card child element.Write your text content inside .card-body section and assign it .card-text.

Card:Header and Footer

Steps to create card having card header and footer:

Step1: Assign .card to the card container.
Step2: Place card heading content inside the card having .card-headerclass.
Step3: Write content inside the card having .card-body class.
Step4: Place card footer information inside the card having .card-footer class.
Step5: Please keep in mind that inside card heading can be created by assigning .card-title to any heading element(<h1> to <h6>) element base class while as card link can be created by assigning .card-link to the <a> element base class.Card heading can be placed inside card header and card body while as card link can be placed inside card bpdy and card footer.

General Syntax

      <div class="card">
  <div class="card-header">Card Heading</div>
  <div class="card-body">
    <p class="card-text">Write card body content.</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-->

Try It Now

Source Code

    <div class="container my-4">
  <div class="card p-4">
    <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>

Try it yourself

Source Code : Output

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 card with title,text and link:

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

General Syntax

      <div class="card" style="width: 18rem;">
  <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 my-3">
  <div class="card p-4">
    <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>
<!--/container-->

Try it yourself

Source Code : Output

Card title

Card subtitle

Write card text content.

Card link Another link

Card Background Color

Card background color is assigned by applying background utilities 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 my-2">
  <div class="card bg-primary p-4">
    <div class="card-body">
      <p class="card-text">Bootstrap card can support text information,images,link,list-group,navs etc.</p>
    </div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

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

Note: 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.

Card border and text color can be changed by providing followings 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">
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Card Text content.</p>
  </div>
</div>

Try It Now

Source Code

    <div class="container my-3">
  <div class="card border-primary p-4">
    <div class="card-body text-primary">
      <h5 class="card-title">Primary card title</h5>
      <p class="card-text">Write card text content here.</p>
    </div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Primary card title

Write card text content here.

Bootstrap 5 Card Type

1.0 Simple Card

Boostrap card parent container contains .card while immediate child contains .card-body.Lets us see by an example.

General Syntax

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

Try It Now

Source Code

    <div class="container my-3">
  <div class="card p-4">
    <div class="card-body">Basic card</div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Basic card

2.0 Bootstrap Card With Header

Boostrap card parent container contains .card while child elemems contains .card-body and .card-header.Lets us see by an example.

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 my-3">
  <div class="card p-4">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Header

Content

Note: Follow the above mention steps to create bootstrap basic card having header section.

3.0 Bootstrap Card With Header And Footer

Bootstrap card parent container contains .card while as child elements contains .card-body , .card-header and .card-footer.Lets us understand it with an example.

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 my-3">
  <div class="card p-4">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div>
    <div class="card-footer">Footer</div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Header

Content

Footer

4.0 Bootstrap Card With Header,Footer And Link

Boostrap 4 card parent container contains .card while as child elemems contains .card-body , .card-header and .card-footer.Please keep in mind that .card-title can be used in inside .card-header and .card-footer container..card-link can be use inside .card-body and card-footer container .Lets us see it with an example

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-my-3">
  <div class="card p-3">
    <div class="card-header">Card Header Section</div>
    <div class="card-body">
      <h4 class="card-title mt-2">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>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Card Header Section

Card title

Write card text information.

Card link Another link

Bootstrap Stretched Link

To make whole card clickable,use .stretched-link 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 my-3">
  <div class="card p-4">
    <div class="card-header">Card Header Section</div>
    <div class="card-body">
      <h4 class="card-title mt-2">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>
<!--/container-->

Try it yourself

Source Code : Output

Card Header Section

Card title

Write card text information.

See Profile

Bootstrap Card Image

Case1:Placing image at the top of the card

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

General Syntax

      <div class="card">
  <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 my-3">
  <div class="card p-2">
    <img class="card-img-top img-fluid" src="https://picsum.photos/seed/picsum/80/70" alt="Card image" />
    <div class="card-body text-center mt-3">
      <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>
<!--container-->

Try it yourself

Source Code : Output

Card Title

Card text.

Card link

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

Case2:Placing Image At The Bottom Of The Card

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

General Syntax

      <div class="card">
  <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>

Try It Now

Source Code

    <div class="container my-3">
  <div class="card p-2">
    <div class="card-body my-2 text-center">
      <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 img-fluid" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" style="width: 100%;" />
  </div>
</div>
<!--container-->

Try it yourself

Source Code : Output

Card Title

Write card text here.

Get more info

Note: 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 background, use .card-img-overlay.

General Syntax

      <div class="card">
  <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 my-3">
  <div class="card p-3">
    <img class="card-img-top img-fluid" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" />
    <div class="card-img-overlay my-4 text-center pt-4">
      <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>
<!--/container-->

Try it yourself

Source Code : Output

Card Title

Write card text information.

Card link

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS