Centering Bootstrap Cards

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:

Try this…

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

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.

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.

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

2 Likes

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.