bootstrap 4:BS Card

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

.card-footer

Following components like text content, images, list-group, nav, link, etc can be put inside the card.

Example

Flower:Rose

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

More Info

Bird

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

More Info

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.

Learn Web Development Learn Graphics Design

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

<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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="card border-success mb-4">
            <div class="card-body text-success">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="card border-danger mb-4">
            <div class="card-body text-danger">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="card border-warning mb-4">
            <div class="card-body text-warning">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="card border-info mb-4">
            <div class="card-body text-info">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="card border-dark mb-4">
            <div class="card-body text-dark">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="card border-light mb-4">
            <div class="card-body text-muted">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>

</div> <!--/row-->

Try it now

Source Code

<div class="container text-center mt-4">


<h4>Bootstrap 4  Border & Text Color Example</h4>

<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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>

        </div>

    </div>

</div>


</div>

</div><!--/container-->

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.

Card Footer

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.

Card Footer Text

Card link Another link

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

Flower:Rose

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

More Info

Bird

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

More Info

Source Code

<div class="container text-center mt-4">

<h2 class="text-center">Card Stretched Link</h2>


<div class="row">

<div class="col-sm-6 col-12 text-center mb-2">

  <div class="card" style="width:80%; margin:auto;">

    <img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="Thumbnail Image" >

    <div class="card-body">

      <div class="card-title"><h2>Card:<b>Title</b></h2></div>

      <p class="card-text">Write card content here.</p>

    </div>

    <div class="card-footer">

      <a href="#" class="card-link btn btn-success stretched-link ">More Info</a>

    </div>

  </div>

  </div><!--/col-sm-6 col-12-->

  <div class="col-sm-6 col-12 text-center">

    <div class="card text-center" style="width:80%; margin:auto;">

      <img src="https://picsum.photos/id/237/200/300" class="rounded img-fluid" alt="Bootstrap card">

      <div class="card-body">

        <div class="card-title"><h2>Card Title</h2></div>

        <p class="card-text">Write your card content here.</p>

      </div>

      <div class="card-footer">

        <a href="#" class="card-link btn btn-success stretched-link ">More Info</a>

      </div>

    </div>

  </div>

  </div><!--/row-->

  </div><!--/container-->

Try it now

Source Code : Output

Card Stretched Link

Card:Title

Write card content here.

More Info

Card Title

Write your card content here.

More Info

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

<div class="row">

     <div class="col-sm-6 col-12 text-center mb-2">

          <div class="card" style="width:90%;margin:auto;">
           <img class="card-img-top img-fluid" src="https://picsum.photos/id/237/200/200" alt="Card image">
         <div class="card-body">
            <h4 class="card-title">Card Title</h4>
             <p class="card-text">This is card text</p>
                 <a href="#" class="btn btn-primary">Card Link</a>
               </div>
           </div>

 </div><!--/col-sm-6 col-12-->

    <div class="col-sm-6 col-12 text-center">

          <div class="card" style="width:90%;margin:auto;">
      
             <div class="card-body">
               <h4 class="card-title">Card Title</h4>
               <p class="card-text">This is card text</p>
                <a href="#" class="btn btn-primary">Card Link</a>
             </div>
       
              <img src="https://picsum.photos/id/1/200/200" class=" card-img-bottom rounded  img-fluid" alt="Rounded Image">

         </div>

</div><!--/col-sm-6-->

</div><!--/row-->

Try it now

Source Code

<div class="container text-center mt-4">

  <h2 class="my-5">Bootstrap Card</h12>

<div class="row">

<div class="col-sm-6 col-12 text-center mb-2">

<div class="card" style="width:90%;margin:auto;">

  <img class="card-img-top" src="https://picsum.photos/id/237/200/200" alt="Card image">

  <div class="card-body">

    <h4 class="card-title">Card Title</h4>

    <p class="card-text">This is card text</p>

    <a href="#" class="btn btn-primary">Card Link</a>

  </div>

</div>

</div><!--/col-sm-6 col-12-->

<div class="col-sm-6 col-12 text-center">

  <div class="card" style="width:90%;margin:auto;">

    <div class="card-body">

      <h4 class="card-title">Card Title</h4>

      <p class="card-text">This is card text</p>

      <a href="#" class="btn btn-primary">Card Link</a>

    </div>

    <img src="https://picsum.photos/id/1/200/200" class=" card-img-bottom rounded  img-fluid" alt="Rounded Image">

  </div>

  </div><!--/col-sm-6-->

  </div><!--/row-->

  </div><!--/container-->

Try it now

Source Code : Output

Bootstrap Card

Card Title

This is card text
Card Link

Card Title

This is card text
Card Link

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

Card Header

Write your card content text.

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

<div class="card-columns">

  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>

  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>

  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>

  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>

  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fifth card</p>
    </div>
  </div>

  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the sixth card</p>
    </div>
  </div>

</div>

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

Question set 1

Bootstrap 4 Cards

Steps To Create Bootstrap 4 Basic Card

Example

Flower:Rose

Bird

General Syntax

Source Code

Source Code : Output

Bootstrap Card

Card Background Color

Example

General Syntax

Source Code

Source Code : Output

Card Background Color

Card Border and Text Color

General Syntax

Source Code

Source Code : Output

Bootstrap 4 Border & Text Color Example

Primary card title

Secondary card title

Bootstrap Card Type

Simple Card

General Syntax

Source Code

Source Code : Output

Bootstrap Simple Card

Card With Header

General Syntax

Source Code

Source Code : Output

Card With Header

Bootstrap Card With Header And Footer

General Syntax

Source Code

Source Code : Output

Card With Header And Footer

Bootstrap Card With Header,Footer And Link

General Syntax

Source Code

Source Code : Output

Card With Header,Footer & Link

Card Body Text

Card Footer Text

Bootstrap Stretched Link

Example

Flower:Rose

Bird

Source Code

Source Code : Output

Card Stretched Link

Card:Title

Card Title

Bootstrap Card Image

Case1:Placing image at the top of the card

General Syntax

Source Code

Source Code : Output

Bootstrap Card Card Title This is card text Card Link Card Title This is card text Card Link

Card Title

Card Title

Case2:Placing image as a background of the card

General Syntax

Source Code

Source Code : Output

Placing image as a background of the card

Card Header

Bootstrap 4 Card Layout

1.0 Card-column

General Syntax

Source Code

card-deck

General Syntax

Source Code

Card-group

General Syntax

Source Code

Horizontal card

General Syntax

Bootstrap Card

Card Title

This is card text
Card Link

Card Title

This is card text
Card Link