Bootstrap 5 Card

Bootstrap 5 Cards

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

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

Basic Card

Steps to create basic card:

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Basic Card

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

Code Explanation

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:

  • Assign .card to the card container.
  • Place card heading content inside the card having .card-headerclass.
  • 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 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 body and card footer.

General Syntax

Try it now

Source Code

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.

Code Explanation

Note:Follow the above mention steps to create a bootstrap card with header and footer component.

Card Titles, text, and links

Steps to create 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

Try it now

Source Code

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

Code Explanation

Note: Follow the above mention steps to create a bootstrap card having card title,subtitle,content and card 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

Try it now

Source Code

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

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

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Card Border & Text Color

Primary card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Secondary card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Code Explanation

Note: Follow the above mention steps to create the different colors of cards having colored.

Type

1.0 Simple Card

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Basic Card

Basic card

Code Explanation

Note:Follow the above mention steps to create a bootstrap basic.

2.0 Bootstrap Card With Header

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Card With Header

Header
Content

Code Explanation

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

3.0 Bootstrap Card With Header And Footer

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Card Having header,body and footer section.

Header
Content

Code Explanation

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

4.0 Bootstrap Card With Header, Footer And Link

Bootstrap 5 card parent container contains .card while as child element 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

Try it now

Source Code

Try it now

Source Code : Output

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

Card Header Section

Card title

Write card text information.

Code Explanation

Note: Follow the above mention steps to create bootstrap basic card having header, body, footer & link section.

Bootstrap 5 Cards: Stretched Card Link

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Stretched Link

Card Header Section

Card title

Write card text information.

Code Explanation

Note:Follow the above mention steps to create bootstrap stretched card link.

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

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Card With Image

Card image

Card Title

Card text.

Card link

Code Explanation

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 <img> base class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Card With Image

Card Title

Write card text here.

Get more info
Card image

Code Explanation

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

Try it now

Source Code

Try it now

Source Code : Output

Placing image as a background of the card.

Card image

Card Title

Write card text information.

Card link

Code Explanation

Note:To place image