Introducing Bootstrap 5 Cards
In this part, we'll learn about the new Card component introduced in Bootstrap 4, which replaces many existing components in Bootstrap 3, and can be used to develop modern-style web layouts without having to reinvent the wheel or be a CSS designer with deep CSS expertise. Now, thanks to Bootstrap 5, you can create modern and outstanding card-based layouts as a developer with little CSS understanding.
Introducing Bootstrap Cards
Bootstrap cards are versatile containers for showing a variety of material (text, photos, links, and so on) in a grouped format. They may be readily altered and changed to provide a fresh and distinct design by simply adding a slew of CSS classes to HTML content.
Card layouts, such as Masonry, are created with cards. Cards may be found in a variety of large web platforms, including e-commerce websites, analytics dashboards, and blogs.
Cards are an alternative for the popular Bootstrap components: panels, thumbnails, and wells (all these can now be created with cards)
Before we begin, let's have a look at how to make various card kinds. This is a synopsis of information regarding Bootstrap 5 Cards:
- Cards are used to present a mix of content in an elegant and compact way
- Cards are built on top of Flexbox
- Cards have no margin by default
- Cards can be easily organized in groups, decks or Masonry columns
- Cards have a header, footer, and one or more bodies
- Cards can be easily aligned and well mixed with the other Bootstrap components etc.
In this article, you will be introduced to the new card component, then you will see several card parts, and lastly you will design a Masonry-like layout using Cards and Card Columns.
Bootstrap Card by example
First, start by creating an HTML file andcopy the following starter template from the Bootstrap docs in the new file:
Now let’s start by creating a basic card. Add a
<div> with the class
.card to create the outer container of your card component.
Next inside the outer container, add a header, card body, and footer.
You can add a header by either creating a
<h*> heading element then add the
You can create a card body by adding a
.card-body class to a
For the footer, you need to add a
<div> with the class
<div class="card"> <div class="card-header"> Card Header </div> <div class="card-body"> Card Body </div> <div class="card-footer"> Card Footer </div> </div>
Please note that you can add one or many card bodies to your card and you can also wrap the content inside the body in other tags such as
<div class="card-body"> <p> You can also add a second body </p> </div>
Use a card body when you want to create a padded section within a card.
card-img-bottomyou can create image caps which are images that exist on the top and bottom of the card body/bodies
<img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top"><div class="card-body"></div> <img class="card-img-bottom" src="https://source.unsplash.com/daily" alt="Card image bottom">
You can see that the card component is taking the whole width of its container division but you can control the width with different means:
- using the
<div class="card" style="width:20rem;">...</div>
Using the Bootstrap 5 Grid
You can also set the height but in most cases the height needs to fit the vertical alignment of the card content so you’ll rarely need to set it.
For adding content inside the card body you also have a bunch of classes (
.card-title, .card-subtitle, .card-text) that make it easy to style different content types such as the card title, subtitle and text.
You can use standard HTML tags to style text within
<div class="card-body"> <h3 class="card-title">Card title</h3> <h4 class="card-subtitle">Card subtitle</h4> <p class="card-text">This is a card body 1</p> </div>
Want to use the cap image as an overlay? you can simply switch the
.card-body class with the
<div class="card"> <img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top"> <div class="card-img-overlay"> <h3 class="card-title">Card 2 title</h3> <h4 class="card-subtitle">Card 2 subtitle</h4> <p class="card-text">This is a card 2 body </p> </div> </div>
You can add navigation tabs and pills to the header of your card using
card-header-pill classes with
<div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Tab 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Tab 2</a> </li> </ul> </div>
You can add links to card content using the
.card-link class with an
<div class="card"> <img class="card-img-top" src="https://source.unsplash.com/daily?rock" alt="Card image top"> <div class="card-img-overlay white"> <h3 class="card-title">Card title</h3> <h4 class="card-subtitle">Card subtitle</h4> <p class="card-text">You can add links to card body</p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> </div>
You can use list as body content. For example this is how you can create two stylish lists without any extra custom CSS
<div class="card text-primary border-primary"> <ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> </div> <br> <div class="card text-primary border-primary"> <div class="card-body"> <h2 class="card-title"> My List</h2> <ul class="list-group list-group-flush"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> </div>
How to Create Complex Card Based Layouts?
Singe cards are great way to display a mix of content but usually you need to display a collection of cards to build complex layouts such as Masonry like layouts.
Bootstrap Card Groups
You can create a single unit of multiple cards using Cards. The columns of the unit will take the same width and height (this is achieved using Flexbox).
This is an example of a group of 3 cards
Bootstrap Card Decks
Card Decks are similar to Card Groups except that individual cards inside a deck are not attached
Bootstrap Card Columns
See the following pen for an example
In this section, we’ve introduced the Card component.
Because to Bootstrap 5, you will no longer be scared when creating modern style and card-based layouts, even whether you are a beginner with HTML and CSS or a developer with little CSS experience.
- Author: Ahmed Bouchefra Follow @ahmedbouchefra