Bootstrap 4 Cards

Bootstrap 4 Cards

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

Steps To Create Bootstrap 4 Basic Card

  • .card-title class is used to make heading inside the elements having class .card-header.
  • .card-text class is used to provide text information within child elements having class .card-body.
  • .card-link class is used to provide link inside the child element having class .card-body
  • or .card-footer.
  • Following components like text content, images, list-group, nav, link, etc can be put inside the card.

Example

Thumbnail Image

Flower:Rose

Rose is the world one of the most beautiful flower that is the representation of love.

Rounded Image

Bird

This bird stands on the tree and looking so cute dute to nature.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Card

Web Development

There are various languages used during web development.

Note: In the above example, .card,.card-header,.card-body & .card-link classes are used to make simple bootstrap card.

Note: Bootstrap card is basically a rectangular box having by default padding. It is of two types namely horizontal card and vertical card.

Card Background Color

Card background color can be achieved by applying bootstrap background color contextual classes.These classes are .bg-primary, .bg-info,.bg-success,.bg-danger, .bg-warning,.bg-dark,.bg-light,.bg-secondary.

Example

Primary card supports text information,images,link,list-group,navs etc.


Danger card supports text information,images,link,list-group,navs etc.


Warning card supports text information,images,link,list-group,navs etc.


Success card supports text information,images,link,list-group,navs etc.


Info card supports text information,images,link,list-group,navs etc.


Light card supports text information,images,link,list-group,navs etc.


Dark card supports text information,images,link,list-group,navs etc.


secondary card supports text information,images,link,list-group,navs etc.


Try It Now

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Card Background Color

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

Note: In the above example,bootstrap background color utility classes are used to change the card background color.

Card Border and Text Color

Card border and card text color can be chnged by providing followings contextual class 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 4 Border & Text Color Example

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.

Note: Card border and card text color can be changed by card border utility claseses.

Bootstrap Card Type

Simple Card

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Simple Card

Basic card

Note: In this example,.card & .card-body is used to make simplest card.

Card With Header

Bootstrap card parent container contains .card while as child elements contains .card-body and .card-header.Lets us see it by an example.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Card With Header

Card Header
Please write your card content.

Note: In this example,.card, .card-body & .card-header is used to make simplest card with header component.

Bootstrap Card With Header And Footer

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Card With Header And Footer

Card Header
Write Card content,here.

Note: In this example,.card, .card-body ,.card-header & .card-footer is used to make simplest card with header & footer.

Bootstrap Card With Header,Footer And Link

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

Card With Header,Footer & Link

Card Header

Card Body Text

Write your card content now.

Note: In this example,.card, .card-body ,.card-header,.card-footer & .card-link is used to make simplest card with header , footer & card link.

Bootstrap Stretched Link

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

Example

Thumbnail Image

Flower:Rose

Rose is the world one of the most beautiful flower that is the representation of love.

Bootstrap card

Bird

This bird stands on the tree and looking so cute dute to nature.

Source Code

Try it now

Source Code : Output

Card Stretched Link

Thumbnail Image

Card:Title

Write card content here.

Bootstrap card

Card Title

Write your card content here.

Note: To create whole card clickable, assign .stretched-link to the card link having .card-link.

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

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Card
Card image

Card Title

This is card text

Card Link

Card Title

This is card text

Card Link
Rounded Image

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

Case2: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

Thumbnail Image

Card Header

Write your card content text.

See More

Note: To place the image in the background of the card,use .card-img-overlay inside the card.

Bootstrap 4 Card Layout

1.0 Card-column

Bootstrap .card-columns creates grid of card that might have different width and height of the card.It shows vertical card inside small device.

General Syntax

Try it now

Source Code

Try it now

Note: Card column creates different width and height of the card and it shows vertical in smaller devices.

card-deck

Bootstrap .card-deck creates equal height and width of the card.

General Syntax

Try it now

Source Code

Try it now

Note: Card-deck is a container of cards.It creates equal height and width of the card.

Card-group

Card-group is basically a container of cards.It contains more than one cards.Bootstrap .card-group removes left and right padding of each cards.

General Syntax

Try it now

Source Code

Try it now

Note: Card-group is a container that consists of more than one card inside the card-group.

Horizontal card

horizontal cards consists of image and text content and those are placed side-by-side using a combination of grid and utility classes.

General Syntax

Try it now

Source Code

Try it now

Note: Bootstrap horizontal card consists of image and text content that lies horizontally left to right.

Online Test / Quiz