Bootstrap 4 Cards | Bootstrap 4 Cards Tutorial

Hello Guys, In this article of Bootstrap 4 Tutorial. We will uncover Bootstrap 4 cards. If you don’t have read another post of Bootstrap then you can read another post if you want. Because we have made many posts on Bootstrap 4. Let’s talk about Bootstrap 4 cards.

if we can talk about Cards in bootstrap, Then Bootstrap provides cards from starting. If we can check previous versions of bootstrap then we will found everywhere cards. And also cards are very useful for all the new projects. This will give a better look to your container and also this one is lightweight. So let’s see the definition of cards.

What are Bootstrap 4 Cards

The Bootstrap 4 card component is a container that is covered by borders and some kind of paddings and margins. This will give a better look at your small containers. this one is used to show data in an attractive look. Cards will incorporate options for Images, headers, and footers, and a wide area of containers. In bootstrap 4 we will see various background colors for cards. colorful background will make this very beautiful.

If you are familiar with bootstrap’s oldest versions then cards have replaced the panel, well, Thumbnail. In the old version, we also used cards with different named but here in the bootstrap 4 we have these contents with cards named.

Here in the cards, you can present whatever you want with amazing look. mainly everyone uses cards for showing Images, Text, Links, Text and also Buttons. If you want to show your Images, Texts, Buttons among then card will best for you. This will give a new and soft look for your data. and one of the best things about cards is you can use any kind of class in the cards. There are no limitations to cards.

Bootstrap 4 is a combination of many contents. So, Let’s see all the contents of cards in the very deep.

We also have youtube channel for web designers and developers only. So Let’s Go and Subsribe Us on Youtube.
Channel Name : DesignHub4u

Content types of Bootstrap 4 Cards

The card supported wide verities of contents like Images, Texts, Buttons, Labels and many more. Let’s see the examples that card supports.

1. Body

The building block of cards is the body. I mean to say that if we assume mail and leaning Piller is the body of the card. This will design content with some specific paddings and margins. You can use define card body using.card-body. Now, See the example of the card body. This is only body example. First, We will see all the components separated and after that, we will see a full example of the card. This will help you to know more deep bootstrap 4 cards.

Example of Card Body

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 4 Card Body</title>
  </head>
<body>
<div class="container">
  <h2>Body of Bootstrap 4 Card</h2>
  <div class="card">
    <div class="card-body">
      Here your texts in the card body.
    </div>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap 4 Card Body</title>

</head>

<body>

<h2>Body of Bootstrap 4 Card</h2>

Here your texts in the card body.

</div>

</body>

</html>

2. Titles, Text, and Links

The card titles are managed by using a class. Like if you want to use Title in the card then you have to use.card-title in the header tags. Like <h1>, <h2>,…<h6>. as per your needs.

There is also a class for subtitles also. Like here you have two headers one is the main and the second one is subheader then you can define subheader using.card-subtitle class. This all works with <h1> to <h6>.

If you want to add any kind of links in Bootstrap cards then you have to use.card-link class for that in the Anchor tag. If you are using .card-link class in any texts then that text will represents like a link. Let’s see an example of this.

Example of Card Titles, Texts, and Links

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 4 Card Body</title>
  </head>
<body>
<div class="container">
  <h2>Example of Card Titles, Texts, and Links in Bootstrap version 4</h2>
  <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">Here your normal texts.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap 4 Card Body</title>

</head>

<body>

<h2>Example of Card Titles, Texts, and Links in Bootstrap version 4</h2>

<h5 class="card-title">Card title</h5>

<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>

<p class="card-text">Here your normal texts.</p>

<a href="#" class="card-link">Another link</a>

</div>

</body>

</html>

3. Images

Yes, In the cards you can also use images. You can use images in the cards using .card-img-top and .card-img-bottom. This will arrange your images as your needs. If you want your image at the top of card then you can use .card-img-top and if you want your image in the bottom then you have to use .card-img-bottom. Let’s see the example using images on the card.

Example of Card Image

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 4 Card images</title>
  </head>
<body> 
 
<div class="container">
  <h2>Bootstrap 4 card Images Example</h2>
  <div class="card" style="width: 18rem;">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <p class="card-text">Here your texts what you want to write.</p>
    </div>
  </div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap 4 Card images</title>

</head>

<body>

<h2>Bootstrap 4 card Images Example</h2>

<p class="card-text">Here your texts what you want to write.</p>

</div>

</body>

</html>

4. List groups

Here you can also group your list on the card. Sometimes you have to need to list your group then you have to use a .list-group class. From using this class you can list your group very easily. here many supportive classes also available for listing a group. Like .list-group-flush, .list-group-item and many more. Which will make your list group very attractive.

Example of List Groups in Bootstrap Cards

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 4 Card List Group</title>
  </head>
<body> 
 
<div class="container">
  <h2>Bootstrap 4 card List Group</h2>
  <div class="card" style="width: 18rem;">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
  </div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap 4 Card List Group</title>

</head>

<body>

<h2>Bootstrap 4 card List Group</h2>

<li class="list-group-item">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item">Vestibulum at eros</li>

</ul>

</div>

</body>

</html>

5. Header and footer

The Header and footer also have specific classes for themselves. On the card, you have a header and footer which you have to highlight in the cards. Then here we have classes like .card-header and .card-footer. Which will present your header and footer in the card. I have also an example of a header and footer. So let us check this example for your deep knowledge.

Example of Card Header and Card Footer in Bootstrap 4

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 4 Card Header and Footer</title>
  </head>
<body> 
 
<div class="container">
  <h2>Bootstrap 4 card Header and Footer</h2>
  <div class="card text-center">
    <div class="card-header">
      This is Header of Card
    </div>
    <div class="card-body">
      <h5 class="card-title">Here yout Title</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">
      This is footer of Card
    </div>
</div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap 4 Card Header and Footer</title>

</head>

<body>

<h2>Bootstrap 4 card Header and Footer</h2>

This is Header of Card

</div>

<h5 class="card-title">Here yout Title</h5>

<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>

<a href="#" class="btn btn-primary">Go somewhere</a>

</div>

This is footer of Card

</div>

</body>

</html>

You can resize your Cards using width as per your needs.

6. Bootstrap 4 Card Background Colors

You know very well bootstrap provides more than eight colors for internal use. These all the colors are also work in the cards. I have an example of all the colors that I have to give you at the bottom.

Example of Card Background colors

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 4 Card Background Colors</title>
  </head>
<body> 
 
<div class="container">
  <h2>Bootstrap 4 card With Separated Colors</h2>
  <div class="card border-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-primary">
      <h5 class="card-title">Primary card title</h5>
      <p class="card-text">Your Texts here...</p>
    </div>
  </div>
  <div class="card border-secondary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-secondary">
      <h5 class="card-title">Secondary card title</h5>
      <p class="card-text">Your Texts here...</p>
    </div>
  </div>
  <div class="card border-success mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-success">
      <h5 class="card-title">Success card title</h5>
      <p class="card-text">Your Texts here...</p>
    </div>
  </div>
  <div class="card border-danger mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-danger">
      <h5 class="card-title">Danger card title</h5>
      <p class="card-text">Your Texts here...</p>
    </div>
  </div>
  <div class="card border-warning mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-warning">
      <h5 class="card-title">Warning card title</h5>
      <p class="card-text">Your Texts here...</p>
    </div>
  </div>
  <div class="card border-info mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-info">
      <h5 class="card-title">Info card title</h5>
      <p class="card-text">Your Texts here...</p>
    </div>
  </div>
  <div class="card border-light mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Light card title</h5>
      <p class="card-text">Your Texts here...</p>
    </div>
  </div>
  <div class="card border-dark mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-dark">
      <h5 class="card-title">Dark card title</h5>
      <p class="card-text">Your Texts here...</p>
    </div>
  </div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap 4 Card Background Colors</title>

</head>

<body>

<h2>Bootstrap 4 card With Separated Colors</h2>

<div class="card-header">Header</div>

<h5 class="card-title">Primary card title</h5>