Bootstrap 4 Tutorial

BS4 Introduction

How to use Bootstrap

BS4 Layout

BS4 Grid System

BS4 Typography

BS4 Colors

BS4 Table

BS4 Images

BS4 Jumbotron

BS4 Alerts

BS4 Buttons

BS4 Button Group

BS4 Badges

BS4 Progress Bar

BS4 Pagination

BS4 Breadcrumb

BS4 Card

BS4 Collapse

BS4 Nav Tabs Pills

BS4 Navbar

BS4 Tooltip

BS4 Carousel

BS4 Scrollspy

BS4 Forms

BS4 Form Validation

BS4 Form Custom

Page Stats

Visitor: 261

Bootstrap 4 Cards

Bootstrap cards provide a flexible and extensible content container. It includes options for headers, footers, content, contextual background colors, and display options. Bootstrap 4 Card is a bordered box with some padding around its content.


Basic Card

A basic card is created with the .card class, and content inside the card is created using .card-body class

Basic card

Contextual Classes

To change the background color of card, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Primary card

Basic card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

<div class="card bg-primary">
  <div class="card-body">Primary card</div>
</div>

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

<div class="card bg-info">
  <div class="card-body">Info card</div>
</div>

<div class="card bg-warning">
  <div class="card-body">Warning card</div>
</div>

<div class="card bg-danger">
  <div class="card-body">Danger card</div>
</div>

<div class="card bg-secondary">
  <div class="card-body">Secondary card</div>
</div>

<div class="card bg-dark text-white">
  <div class="card-body">Dark card</div>
</div>

<div class="card bg-light">
  <div class="card-body">Light card</div>
</div>

Header and Footer

The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card.


Header
Content

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div> 
  <div class="card-footer">Footer</div>
</div>

Titles, text, and links

Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a <p> element if it is the last child in the card. The .card-link class adds a blue color to any link, and a hover effect.

Card title

Some example text. Some example text.

Card link Another link

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Card Images

Add .card-image-top or .card-image-bottom to an <img> to place it at the top or at the bottom inside the card.

Card image

Profile Name

Some quick example text to build on the card title and make up the bulk of the card's content.

Full Profile

Profile Name

Some quick example text to build on the card title and make up the bulk of the card's content.

Full Profile
Card image

Card Image Overlays

Turn an image into a card background, use .card-img-overlay to add text on top of the image.

Card image

Profile Name

Some quick example text to build on the card title and make up the bulk of the card's content.

Full Profile

<div class="card" style="width:500px">
  <img class="card-img-top" src="../images/panda.jpg" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>