Bootstrap 4 Cards

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

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

        Steps To Create Basic Card

 Step1:
  .card-title class is used to make heading inside the elements having class .card-header.
 Step2:
  .card-text class is used to provide text information within child elements having class .card-body.
 Step3:
  .card-link class is used to provide link inside the child element having class .card-body
 or .card-footer.

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

General Syntax

		<div class="card">
  <div class="card-header">Card Header</div>
  <div class="card-body">
    <p class="card-text">Card Body Content</p>
  </div>
  <div class="card-footer">
    <a href="#" class="card-link">Card Link1</a>
    <a href="#" class="card-link">Card Link2</a>
  </div>
</div>

Note: In the above example, .card,.card-header,.card-body & .card-link classes are used to make simple bootstrap 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.

General Syntax

		<div class="card bg-dark text-white">
  <div class="card-body">
    <p class="card-text">Card Text content../p></p>
  </div>
</div>

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 changed 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="card p-4 border-light mb-4">
  <div class="card-body text-muted">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Card Text .</p>
  </div>
</div>

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

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

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

Bootstrap Stretched Link

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

General Syntax

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

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="card" style="width: 90%; margin: auto;">
  <img class="card-img-top" src="...." alt="Card image" />
  <div class="card-body"></div>
</div>

Try It Now

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

		<div class="card" style="width:90%;margin: auto;"> 
  <img src="...." class="img-thumbnail img-fluid" alt="Thumbnail Image">
  <div class="card-img-overlay text-white">
    <h4 class="card-title">Card Header</h4>
    <p class="card-text">Write your card content text.</p>
    <a href="#" class="btn btn-primary">See More</a> 
  </div>
</div>

Try It Now

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>

Source Code

	
		<div class="container my-2">
  <div class="row">
      <div class="col-12 col-sm-8 offset-sm-2">
        <div class="card-columns">
          <div class="card bg-primary p-3">
            <div class="card-body text-center">
              <p class="card-text">Some text inside the first card</p>
            </div>
          </div>
          <div class="card bg-warning p-3">
            <div class="card-body text-center">
              <p class="card-text">Some text inside the second card</p>
            </div>
          </div>
          <div class="card bg-success p-3">
            <div class="card-body text-center">
              <p class="card-text">Some text inside the third card</p>
            </div>
          </div>
          <div class="card bg-danger p-3">
            <div class="card-body text-center">
              <p class="card-text">Some text inside the fourth card</p>
            </div>
          </div>
          <div class="card bg-light p-3">
            <div class="card-body text-center">
              <p class="card-text">Some text inside the fifth card</p>
            </div>
          </div>
          <div class="card bg-info p-3">
            <div class="card-body text-center">
              <p class="card-text">Some text inside the sixth card</p>
            </div>
          </div>
        </div>
      </div>
      <!--/offset-sm-2-->
    </div>
</div>

Try it yourself

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

		<div class="card-deck"></div>

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

		<div class="card-group"></div>

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

		<div class="card">
  <div class="row no-gutters">
  <div class="col-sm-5  col-md-6 " style="background: #868e96;"> <img src="https://picsum.photos/id/1/200/300" class="card-img-top " alt="Horrizontal card image">
    </div>
  <div class="col-sm-7 col-md-6">
      <div class="card-body">
        <h5 class="card-title">Photo</h5>
        <p class="card-text">This is random photo.</p> <a href="#" class="btn btn-primary stretched-link">More Info.</a> </div>
   </div>
  </div>
</div>

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

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS