Home >>Bootstrap Tutorial >Bootstrap Cards

Bootstrap Cards

A Bootstrap card is a box containing some padding around the content. Cards includes header, footer, colors, content, etc. in bootstrap. It provides some predefined classes like .card, .card-title, .card-body, card-footer etc. you can also use contextual colors of bootstrap for change the background and text color.

Basic Cards structure

Let's see the structure of cards:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Card</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card" style="width:20rem;">
  <p><img src="..." class="card-img-top" alt="...">Insert Image Here..</p>
  <div class="card-body border">
    <h5 class="card-title border">Author Name</h5>
    <p class="card-text border">About Author</p>
    <a href="#" class="btn btn-primary">button</a>
  </div>
   <div class="card-footer ">Footer</div>
</div>
</body>
</html>

Output:

Insert Image Here..

Author Name

About Author

button

Footer

Titles, text, and links

You can also use titles, links and text in card. To show titles in card add a class .card-title, add .card-text for showing the text about title and for links (anchor tag) add class .card-link.

Let's take an example of above content:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Card</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card"  style="width:20rem;">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">text related to title</p>
    <a href="#" class="card-link">button link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
</body>
</html>

Output:

Card title

text related to title

button link Another link

Card Images

If you want you can also put images at the top or at the bottom of your card. Bootstrap provides you some predefined classes for images. Put images at the top of card add class .card-img-top or .card-img-bottom (place you images at the bottom in card) to an <img> tag.

Let's take an example of card images:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
  <div class="col-sm-6">
      <p>Image at the top</p>
  <div class="card text-center" style="width:400px">
    <img class="card-img-top m-auto" src="../Bootstrap cards/person.png" alt="Card image" style="width:150px;height:150px;">
    <div class="card-body">
      <h4 class="card-title">Martin</h4>
      <p class="card-text">Martin is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
  </div>
  <div class="col-sm-6">
    <p>Image at the bottom</p>
  <div class="card text-center" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">John</h4>
      <p class="card-text">John is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
    <img class="card-img-bottom m-auto" src="../Bootstrap cards/person1.png" alt="Card image" style="width:150px;height:150px;">
  </div>
  </div>
</div>
</div>
</body>
</html>

Output:

Image at the top

Martin

Martin is an architect and engineer

See Profile

Image at the bottom

John

John is an architect and engineer

See Profile

Image Overlays

To show text on the background of the image is known as image overlays. Add class .card-img-overlay in a <div> element to add text.

Let's take an example of image overlays:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <div class="card text-danger text-center" style="width:20rem">
  <img class="card-img-top" src="../Bootstrap cards/person-bg.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Heading</h4>
    <p class="card-text">some text about heading..</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>
</div>
</body>
</html>

Output:

Heading

some text about heading..

See Profile

Using Grid

You can also use Grid system for wrap cards into rows and columns:

Let's take an example of Grid card:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">text title here...</h5>
        <p class="card-text">Add additional content here...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">text title here...</h5>
        <p class="card-text">Add additional content here...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>
</div>
</body>
</html>

Output:

text title here...

Add additional content here...

Go somewhere

text title here...

Add additional content here...

Go somewhere

Text alignment

You can also align the text to left, center, right. Add class .Text-left to left align of text, add class .Text-center to center align of text, add class . Text-right to right align of text together with class .card.

Let's take an example of text-alignment:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">text title here...</h5>
        <p class="card-text">Add additional content here...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title">text title here...</h5>
        <p class="card-text">Add additional content here...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
    <div class="col-sm-4">
    <div class="card text-right">
      <div class="card-body">
        <h5 class="card-title">text title here...</h5>
        <p class="card-text">Add additional content here...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>
</div>
</body>
</html>

Output:

text title here...

Add additional content here...

Go somewhere

text title here...

Add additional content here...

Go somewhere

text title here...

Add additional content here...

Go somewhere

Contextual Cards

To add background color to the card add contextual classes .bg-*contextual color together with .card class.

Let's take an example of contextual cards:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Cards with background color</h2>
  <div class="row">
<div class="col-md-3"> 
 <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div> 
<div class="col-md-3"> 
 <div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
<div class="col-md-3"> 
 <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
<div class="col-md-3"> 
 <div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
<div class="col-md-3"> 
 <div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
 <div class="col-md-3"> 
 <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
 <div class="col-md-3"> 
 <div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
 <div class="col-md-3"> 
 <div class="card text-white bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
</div>
</div>
</body>
</html>

Output:

Cards with background color

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Border Cards

To add border color to the card add contextual classes .border-*contextual color together with .card class.

Let's take an example:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Cards with border</h2>
  <div class="row">
<div class="col-md-3"> 
 <div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div> 
<div class="col-md-3"> 
 <div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
<div class="col-md-3"> 
 <div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
<div class="col-md-3"> 
 <div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
<div class="col-md-3"> 
 <div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
 <div class="col-md-3"> 
 <div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
 <div class="col-md-3"> 
 <div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
 <div class="col-md-3"> 
 <div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Heading Text</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">put some text here.....</p>
  </div>
</div>
 </div>
</div>
</div>
</body>
</html>

Output:

Cards with border

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

Heading Text

Primary card title

put some text here.....

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads