How to center cards in Bootstrap 4

Cards are one of the most widely used Bootstrap features. They are the perfect features for displaying content. As a developer using Bootstrap, you should be able to perform many operations on cards to make your development more responsive and perfect.

Here’s a guide teaching you how to center Cards in Bootstrap 4.

Centering Cards in Bootstrap 4

We will explore two ways to center cards.

1. Using the mx-auto class: mx-auto is a Bootstrap utility that can center elements. You can use it to center a card.

The card above is centered using the mx-auto class. The class was added to the div containing the card class on line 7 to make it work.

2. Using offset-* class: A card can be centered using the offset class. This depends on the actual division the card occupies on the screen.

Suppose you have a card with a class col-6. You can center this card by dividing the remaining division of the screen by two, in this case-6. Therefore, you set it to offset-3.

Centering a card is an easy task that can be done in different ways.