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: