Bootstrap 4 Components

Cards

A card in BootStrap 4 is a flexible and extensible content container. A card can contain headers and footers, background colors, images, pretty much anything.

Note: cards in BootStrap 4 replaces panels, wells, and thumbnails in older versions. But their functionality can be included by using modifier classes to a card.

Example. Let’s begin with a simple card.

To create a basic card, add .card and .card-body classes to an element to create the outer card element. Add classes .card-title to add the title of the card and .card-text to add the text in the card.

<div class="card card-body" style="width: 20rem"> <h4 class="card-title">Card Example</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante..</p> <a href="#" class="btn btn-primary">More</a> </div>

Note: by default, .card-body gives padding to the contents inside it which give a spacing between the content and the card border. However, this padding can be avoided by putting the content outside of the .card-body so that it places itself flushed against the card border. For that, place the .card-body inside another <div> element and nest it inside the parent <div>.

List Groups

You can create a list group within a card. .list-group-flush creates a list that fits flush against the card’s border. <div class="card"> <ul class="list-group list-group-flush"> <li class="list-group-item">Milk</li> <li class="list-group-item">Eggs</li> <li class="list-group-item">Bread</li> </ul> </div>

Links

Add links to the cards using <a> element and class .card-link within it.

<div class="card"> <div class="card-body"> <h4 class="card-title">Groceries</h4> <p class="card-text">Add or remove items from the list of groceries</p> <a href="#" class="card-link">Add items</a> <a href="#" class="card-link">Remove items</a> </div> </div>

Header and Footer

You can add a header or footer inside a card by adding the classes .card-header and .card-footer into a <div> element.

<div class="card text-center"> <div class="card-header"> Card Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Card with a header and a footer.</p> </div> <div class="card-footer"> Card Footer </div> </div>

Images in Cards

Images can be added to the top or bottom of the cards using .card-img-top or .card-img-bottom. You can also add text to the cards using .card-text. <div class="card"> <img class="card-img-top" src="jpg/sunset.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div>

Image Cap

Cards include ‘image caps’ which are images at the top or bottom.

<div class="card"> <img class="card-img-top" src="jpg/sunset.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Sunset</h4> <p class="card-text">a beautiful sunset with mesmerizing shades of blue and red.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-bottom" src="jpg/sunset.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Sunset</h4> <p class="card-text">a beautiful sunset with mesmerizing shades of blue and red.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div>

Image Overlay

You can use images as card background and have the text lay on top of the image. For this give include the text content inside the class .card-image-overlay. Use .text-white if need be depending on whether the image gives dark or light background to the card.

<div class="card text-white"> <img class="card-img" src="jpg/sunset.jpg" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Sunset</h4> <p class="card-text">a beautiful sunset with mesmerizing shades of blue and red.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div>

Navigation in cards

To include navigation in cards use bootstrap nav components.

<div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Content of the card.</p> <a href="#" class="btn btn-primary">More</a> </div> </div>

Nav-pills

Add the .card-header-pills to the <ul> element.

<div class="card text-center"> <div class="card-header"> <ul class="nav nav-pills card-header-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Content of the card.</p> <a href="#" class="btn btn-primary">More</a> </div> </div>

Card Sizing

Cards by default take up the entire width unless specified otherwise. The size of the cards can be specified using utility classes or using our own custom CSS files.

Using grid markup

Cards can be arranged in different columns in a row using Bootstrap grid layout.

<div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h3 class="card-title">Card Title</h3> <p class="card-text">Content of the card.</p> <a href="#" class="btn btn-primary">More</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h3 class="card-title">Card Title</h3> <p class="card-text">Content of the card.</p> <a href="#" class="btn btn-primary">More</a> </div> </div> </div> </div>

Text Alignment

To align the text within the cards, use .text-align classes.

<div class="row"> <div class="card" style="width: 20rem"> <div class="card-body"> <h3 class="card-title">Card Title</h3> <p class="card-text">This sentence is the content of the card.</p> <a href="#" class="btn btn-primary">More</a> </div> </div> </div>

Background Color Variants

Cards have different contextual classes to add color to the background and border of the classes based on their context.

<div class="card text-white bg-primary mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> <div class="card text-white bg-success mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> <div class="card text-white bg-info mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> <div class="card text-white bg-warning mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> <div class="card text-white bg-danger text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div>

Note: use .text-white for darker background colors.

Card Border Color

If you do not need cards with the background colors filled inside, you can remove the background color with matching border. To do this, replace default modifier class with .border-* classes.

<div class="card border-primary mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> <div class="card border-success mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> <div class="card border-info mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> <div class="card border-warning mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> <div class="card border-danger text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div>

Card Groups

We can create a group of different cards using card group.

<div class="card-group"> <div class="card"> <img class="card-img-top" src="jpg/sunset.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card"> <img class="card-img-top" src="jpg/sunset.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card"> <img class="card-img-top" src="jpg/sunset.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div>

Card Decks

If you need spacing between the cards in a group of cards, use .card-deck instead.