CODEWITHSUNDEEP
cssbootstrap-5
Don Boss
Don Boss

Reputation: 15

How can I center bootstrap5 card

I'm trying to add this card to be on a center of web browser but I can't, is any body can show me how to center card in either bootstrap5 or css3?

I'm using Bootstrap5.

The Card

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="https://thumbs.dreamstime.com/b/young-black-man-smiling-to-camera-his-desk-office-young-black-man-smiling-to-camera-his-desk-office-108952653.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
        </div>
    </div>
  </div>

Even when I try to add justify-content-center in a row, it does not work.

<div class="container">
    <div class="row justify-content-center">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="https://thumbs.dreamstime.com/b/young-black-man-smiling-to-camera-his-desk-office-young-black-man-smiling-to-camera-his-desk-office-108952653.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
        </div>
    </div>
  </div>

Upvotes: 0

Views: 104

Answers (1)

Kurt Chun
Kurt Chun

Reputation: 421

you could try "d-flex justify-content-center" at 

<div class="col d-flex justify-content-center">

it is due to the display of flex and flex attributes only affects the immediate child. Which means if your .card needs to have the "justify-content-center" style, it has to be set to its immediate parent.

Upvotes: 1

Related Questions