Learn About Cards and Card Components in Bootstrap v4

0
3090
Card-Components

Card-Components

The concept of the Cards component is very exciting feature that has been added to Bootstrap v4. With the advent of this feature, the old features such as cover panels, thumbnails, and wells have been removed from Bootstrap. The cards can be described as a content container which are very extensible as well as very flexible and include a wide range of contents, contextual background colors, footers and headers, and robust display options.

Let’s explore the card is more detail:

  • Cards in Bootstrap v4 requires less markup content and classes.
  • It provides us the best possible control of the web element as these markup content and classes are flexible and extensible (i.e. capable of getting remixed and extended with great ease).

In the following example, we are using the .card-block class on the .card element to consolidate the markup.

The following is the output for the above Bootstrap v4 cards markup:
CardExample1
Content types in Cards
Cards component supports contents such as images, text, list groups, links, and much more. In the following example, we are doing a mix and match of these content types to create a beautiful card as shown below.

The following is the output for the above Bootstrap v4 cards markup:
ContentType
Sizing in Cards: –
Cards have a sizing feature through which we can constrain the cards width with the help of custom CSS, or predefined grid classes, or custom styles using our grid mixins as shown below.

  • Using the Grid — in the following example for cards sizing.

The following is the output for the above Bootstrap v4 cards markup.
SizingUsingGrids

  • Using custom widths— in the following example for cards sizing.

The following is the output for the above Bootstrap v4 cards markup.
Sizing with custom width
Text alignment in Cards
Utility classes in cards component allows to change the text alignment of any card in its entirety or on its specific part. An example on text alignment is shown below.

The following is the output for the above Bootstrap v4 cards markup.
Text Alignment
Header and footer in Cards
By using utility classes in cards, we can add an optional header and/or footer within a card as shown in the following example.

The following is the output for the above Bootstrap v4 cards markup.
HeaderAndFooter
Image caps in Cards
In Bootstrap v4, similar to the headers and footers, the cards can include the top and the bottom image caps as shown in the following example.

The following is the output for the above Bootstrap v4 cards markup.
ImageCap
Image overlays:
By using the utility classes present in the cards, we can overlay the image by turning it into a background and overlaying the card’s text. One of such known utility class is .card-inverse. Such an example is shown below.

The following is the output for the above Bootstrap v4 cards markup.
ImageOverlay
Inverted text
There are various utility classes which are included in Bootstrap v4 for inverted text on cards. One of such a class is that quickly toggles the text color. By default, Bootstrap v4 use the dark text and assume a light background. Also, we can call .card-inverse class for white text that specify the background-color and border-color that suits the best. Alternatively, we can also use .card-inverse class with the contextual backgrounds variants as shown in the following example.

The following is the output for the above Bootstrap v4 cards markup.
Inverted Text
Background variants
There are several background variant utility classes of cards in Bootstrap v4 which can quickly change the background-color and border-color of a card. This is to be noted that the darker colors require the use of .card-inverse class. Such an example is shown below.

The following is the output for the above Bootstrap v4 cards markup.
BackGroundvariants
Groups
This is one of the best feature that is added to Bootstrap v4 for cards component. Here we can do the following.

  • Use the card groups to render cards as a single, attached element with equal width and height columns.
  • Card groups are using options such as display: table; and table-layout: fixed; (by default) in order to achieve the uniform sizing.
  • Also, in group cards we may enable the flexbox mode to use display: flex; that provide the same effect.

The following is an example on group cards.

The following is the output for the above Bootstrap v4 cards markup.
Groups
Decks
This is another great feature that is added to Bootstrap v4 for cards component. With this feature, we can do the following.

  • Card decks are used when there is a set of cards in which each card is of the equal width and the height to that of other card in the set.
  • Card decks require two wrapping elements: .card-deck-wrapper and a .card-deck (by default).
  • We can also use the table styles for the sizing and the gutters on .card-deck. The .card-deck-wrapper is used to negative out the margin of the border-spacing on the .card-deck.

Let’s understand decks with the help of following example.

The following is the output for the above Bootstrap v4 cards markup.
Decks
Columns
Card columns feature in Bootstrap v4 is another interesting feature. With this feature, we can do the following.

  • Card columns organize cards into Masonry-like columns where CSS wrap them in .card-columns.
  • This is to be noted that this feature is not available in IE9 browser and browsers which have no support for the column-* CSS properties.

The following is an example on Columns in Cards.

The following is the output for the above Bootstrap v4 cards markup.
Columns
Source Code for Cards in Bootstrap v4
Conclusion
In this chapter, we have covered everything you might need to know about Cards and cards components which are added to Bootstrap v4. We also went over examples of each of the new aspects and features that were demonstrated.

LEAVE A REPLY

Please enter your comment!
Please enter your name here