Centering containers with React Bootstrap

Question

I have an old react website that I'm starting to work on again. I made no changes to the code except updating packages to their current versions. npm start starts up with no issues. The problem is, nothing is centered the way it is supposed to be.

My assumption is that bootstrap updated and containers are handled differently. Below is my home.js

import React from 'react'
import Header from '../Header/Header';
import Footer from "../Footer";
import MachineLearningCard from './Card/Card';
import HowWeUse from './HowWeUse/HowWeUse';
import './home.css';

import { useNavigate } from 'react-router-dom';

import { Container, Row, Col, Image, Button } from 'react-bootstrap';
import { Hidden } from '@material-ui/core';
const Home = () => {
    const history = useNavigate()
    return (
        <div>
            <header className="home__HeaderContainer">
                <Header />
                <Container fluid>
                    <Row>
                        <Col md={7} sm={12}>
                            <div className="home__leftSideContainer">
                                <h1 className="home__headerHeroTextTitle">
                                    RandomText <span className="home__headerHeroTextSpan">RandomText</span> Some more RandomText
                            </h1>
                                <p className="home__headerHeroTextDescription">
                                    Even more RandomText.
                            </p>
                                <Button
                                    bsPrefix="home__getStarted"
                                    onClick={() => history("/register")}
                                >Get Started</Button>
                            </div>
                        </Col>
                        <Hidden xsDown>
                            <Col md={5}>
                                <Image
                                    src={HeaderHeroImage}
                                    alt="home-hero-image"
                                    fluid
                                    style={{ width: 600, marginTop: 50 }}
                                />
                            </Col>
                        </Hidden>
                    </Row>
                </Container>
                <Hidden smUp>
                    <img
                        src={HomeChevron}
                        alt="Chevron Down"
                        className="header__chavron_down"
                    />
                </Hidden>
            </header>

className="home__headerHeroTextTitle and className="home__headerHeroTextDescription" are centered. However, the home-hero-image should be the the right of the RandomText, but it is below and to the left of it. Below is the css

.home__HeaderContainer {
    background-image: url("../../assets/images/home-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 800px;
}

 .home__HeaderContainer {
    background-image: url("../../assets/images/Hero bg-mobile.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 0px 0px 100px;
    min-height: 500px;
 }

I tried researching what changed in bootstrap but I could not find anything. The only logical explanation I can come up with is containers are handled different because everything is not centered.

Answer 1

I had to do the following and it fixed my issue

npm i bootstrap

and

add import 'bootstrap/dist/css/bootstrap.min.css' to index.js