How to center cards in bootstrap 4?

Detailed explanation

Centering content in Bootstrap is straightforward, thanks to its built-in flex properties and the grid system. Let's dive into different scenarios and solutions.

Centering a single lonely card

Center a sole card by combining .mx-auto and width styling. Here, the card feels like a kid in an empty playground.

<div class="container">
  <div class="card mx-auto" style="width: 18rem;"> <!-- Single Card content goes here: "Lonely, I'm so lonely" 🎵 --> </div>
</div>


.mx-auto sets horizontal margins to auto, aligning the card in a "Look mom, no hands!" style.

Centering multiple friendly cards within columns

With nesting and partying multiple cards, use the .row with .mx-auto to get the most lit squad photo.

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4 mx-auto"> <!-- Card 1: "We're the cool ones!" --> </div>
    <div class="col-md-4 mx-auto"> <!-- Card 2: "Join our club!" --> </div>
  </div>
</div>


This is where .mx-auto on columns can lead the cards to party in the center of the layout.

Vertical centering or skydiving within a viewport

Before a vertical centering operation, use .vh-100 on the .row and .d-flex align-items-center on the .container. It's like skydiving – you float right within a viewport-height space.

<div class="container d-flex align-items-center" style="min-height: 100vh;">
  <div class="row w-100 justify-content-center">
    <div class="col-md-4"> <!-- Card content: "Skydiving into the center. Whee!" --> </div>
  </div>
</div>


By assigning a minimum height to the viewport, the content performs a perfect middle landing.

Slight shuffle using offset classes

Sometimes, a little shuffle or offset is required. Hence, we have .offset-* classes; they're like a salsa dance step to the side.

<div class="row justify-content-center">
  <div class="col-md-4 offset-md-1"> <!-- Card 1 with offset: "I stand to the side, said the shy Card1" --> </div>
  <div class="col-md-4"> <!-- Card 2: "Danced straight into the center!" --> </div>
</div>


Use .offset-* sparingly to dance responsibly and not break the responsive rave.

Dive deeper

Boost your centering skills with these advanced insights.

Defining width to .mx-auto

Defining width for .mx-auto is like setting a containing box. Without width, it's like saying, "you have the entire universe," and hence, no centering.

<div class="card mx-auto" style="width: 18rem;"> <!-- Card content --> </div>


Spacing out the cards

A bunch of cards without space is just claustrophobic. Use .mb-* as a magic wand for space:

<div class="card mb-3 mx-auto" style="width: 18rem;"> <!-- Card content --> </div>


It's a relief, just like social distancing in a crowded place.

Centering content within cards

Center inline or nested elements using .text-center. It's like centering the fillings in a sandwich.

<div class="card mx-auto text-center" style="width: 18rem;"> <!-- Centered text or inline elements --> </div>


Working with loops for dynamic content

For dynamically generating cards through loops, the .row and .col-* classes are your best buddies.

<div class="row justify-content-center">
  {% for card in cards %}
    <div class="col-md-4 mx-auto mb-3"> <!-- Dynamic card content: "Look, Ma! I multiplied!" --> </div>
  {% endfor %}
</div>


Making cards accessible

Remember, accessibility is empathy. Make the cards keyboard-accessible and readable for screen readers. Help all users enjoy your well-centered cards.