Centering Bootstrap Cards

[sdnorris]

I didn’t make much use of Bootstrap during the Responsive Web Design certification, so I’m trying to learn it now while I complete some of the Front End Library projects. I’ve designed a calculator using the Card classes, but I can’t figure out how best to center it vertically and horizontally on the page. I’ve tried placing the card within a .col inside of a .row inside of a .container, or simply within a .container div, but no matter what I do it seems to sit just off the left edge of the screen. I also haven’t been able to find out the best way of doing this from Bootstrap’s docs, as adding .text-center and/or .justify-content-center to my container div doesn’t seem to have any effect.

What is the best way of doing this generally? Is there something wrong with the way that I am implementing these classes?

Thanks for any advice you may have.

Here is a link to the pen:
https://codepen.io/sdnorris/pen/YzrZYpO?editors=0010

[HumbleAssassin]

Try this…

.container {
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

[HumbleAssassin]

It was not centering before because somewhere you gave width to the container and when you tried to center it was not centering vertically because container had 100% of width.

[sdnorris]

I suppose that would work but wouldn’t that modify the container class in Bootstrap? As a learning exercise, I’m trying to align things using only the Bootstrap grid, so I’d like to avoid having to modify the classes like this if possible.

[miketandy]

To the container you can add d-flex justify-content-center vh-100 align-items-center… these are all bootstrap classes

[sdnorris]

Ah, I guess d-flex was the thing that was missing! I thought .container was already a flex box. Thanks very much, I’ll try this out.