How To Create Cards Components In Bootstrap 4

Introduction

This article will demonstrate you, how you can use bootstrap 4 cards components. A cardis a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. if you are familiar with Bootstrap 3, cards replace old panals,well and thumbnails. Cards are build with as little markup and styles as possible, but still manage to deliver a ton of control and customazation. Card build with flexbox, they offer easy alignment and mix well with other bootstrap components.

To use Bootstrap 4 card components your project, you need to have the following downloaded or cdn link scripts,

Example of Basic Card

Output


Example of Card 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 (or the only one) in card-body. The .card-link class adds a blue color to any link, and a hover effect.

Example of with Card Images

Add .card-img-top or .card-img-bottom to an <img> to place the image at the top or at the bottom inside the card. Note that we have added the image outside of the .card-body to span the entire width.

Output

Output

Example of Card Image Overlay

Card image overlay turns an image into a card background and use .card-img-overlay to overlay the card's text.