bootstrap cards rendered by map function dont show up side by side

Question

i am using bootstrap and i am trying to display a few cards side by side but the are displayed under each other, i want the cards to be displayed side by side and then wrap to next line

the code:

<div style={{ marginBottom: "100px",  marginTop: "100px" }}>
      <Wrapper id="projects">
        <div className="whiteBg">
          <div className="container2 row d-flex justify-content-center">
            <HeaderInfo>
              <h1 className="font40 extraBold darkblueColor">
                Our Awesome Projects
              </h1>
              <p className="font13">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                diam nonumy eirmod tempor invidunt ut
                <br />
                labore et dolore magna aliquyam erat, sed diam voluptua.
              </p>
            </HeaderInfo>

            {projects.map((project, index) => (
              <div className=" textCenter">
                <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <ProjectBox
                    img={urlFor(project.imgUrl)}
                    title="Awesome Project1"
                    text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor."
                    action={() => alert("clicked")}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      </Wrapper>
    </div>