Make a Section as the example

Question

I’m trying to make a Section like the one in the image below, but I’m having some trouble positioning the circles the way I need to.

In the green part it is to have a text and the box of it should overwrite the header (image that is above), I did it by placing a negative margin-top, I do not know if this is the best way, but my difficulty is in doing the next Section, with the 6 circles.

<section>
<div class="container">
  <div class="row align-items-center">
    <div class="col-lg-6 order-lg-2">
      <div class="row">AQUI ENTRA 3 CIRCULOS E UM TEXTO ABAIXO DELES</div>
      <div class="row">AQUI ENTRA 3 E UM TEXTO ABAIXO DELES/div>
    </div>
    <div class="col-lg-6 order-lg-1 box-green">
        <h2 class="display-3">Texto da parte verde.</h2>
    </div>
  </div>
</div>
</section>

I made the circles, but I don’t know how I can put a text inside them and an icon inside.

Answer 1

You have to wear the flex classes of Bootstrap as d-flex, flex-wrap, justify-content-around, and another as w-100 and text-center to adjust everything and border border-danger and rounded-circle to make the ball, basically removing the CSS from the height and width of the circle vc need nothing else...

Follow the image code above:

.box {
    width: 100px;
    height: 100px;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />

<section>
<div class="container">
  <div class="row align-items-center">
      <div class="col-lg-6 order-lg-2">
          <div class="row">
              <div class="col-4">
                  <div class="border border-danger rounded-circle box mx-auto">1</div>
              </div>
              <div class="col-4">
                  <div class="border border-danger rounded-circle box mx-auto">1</div>
              </div>
              <div class="col-4">
                  <div class="border border-danger rounded-circle box mx-auto">1</div>
              </div>
              <div class="col-4">
                  <p class="text-center">texto</p>
              </div>
              <div class="col-4">
                  <p class="text-center">texto</p>
              </div>
              <div class="col-4">
                  <p class="text-center">texto</p>
              </div>
          </div>
          <div class="row">
              <div class="col-4">
                  <div class="border border-danger rounded-circle box mx-auto">1</div>
              </div>
              <div class="col-4">
                  <div class="border border-danger rounded-circle box mx-auto">1</div>
              </div>
              <div class="col-4">
                  <div class="border border-danger rounded-circle box mx-auto">1</div>
              </div>
              <div class="col-4">
                  <p class="text-center">texto</p>
              </div>
              <div class="col-4">
                  <p class="text-center">texto</p>
              </div>
              <div class="col-4">
                  <p class="text-center">texto</p>
              </div>
          </div>

          </div>
          <div class="col-lg-6 order-lg-1 box-green">
              <h2 class="display-3">Texto da parte verde.</h2>
          </div>
      </div>
  </div>
</section>