Столбцы с кругами перекрываются вертикально в Bootrap 4

Question

Я пытаюсь добиться эффекта, отображаемого на изображении ниже, с помощью 'Bootstrap 4'. То, чего я достиг, это отчасти то, что я хочу, потому что между точками слишком большое вертикальное расстояние.

Сначала я попытался вложить столбцы, а затем использовали отрицательные «поля», но это не помогло сместить круги по вертикали ближе друг к другу. Можно ли даже сделать так, чтобы «cols» «перекрывался», или мне нужно найти другой способ достичь желаемого вида?

.block {
  text-align: center;
  vertical-align: middle;
}
.circle {
  background-color: darkred;
  color: white;
  border-radius: 200px;
  height: 110px;
  width: 110px;
  display: table;
  /* margin-bottom: -50px; */

}
.circle p {
  vertical-align: middle;
  display: table-cell;
}

<!--Circles-->
  <div class="row no-gutters justify-content-center">
    <div class="col-lg-3 ">
      <div class="col-lg-2 block">
        <div class="circle   ">
          <p>Circle 1</p>
        </div>
      </div>
      <div class="col-lg-1 block offset-5">
        <div class="circle  ">
          <p>Circle 2</p>
        </div>
      </div>
      <div class="col-lg-1 block ">
        <div class="circle  ">
          <p>Circle 3</p>
        </div>
      </div>
      <div class="col-lg-1 block  offset-5 ">
        <div class="circle  ">
          <p>Circle 4</p>
        </div>
      </div>
      <div class="col-lg-1 block ">
        <div class="circle  ">
          <p>Circle 5</p>
        </div>
      </div>
<!-- Text-->
    </div>
    <div class="col-lg-7 ">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </div>
  </div>

Answer 1

Вы можете достичь с помощью Bootstrap4 предопределенных классов.
Возьмите div и определите class="d-flex justify-content-center align-items-center", а внутри этого div возьмите еще два div с class="col-5 px-0", поэтому в левой стороне div определить circle div 1,3,5 и правая сторона div определить circle div 2,4 ,
Для .circle определить width:100%, height:0, поэтому высота будет автоматически равна ширине из этой техники заполнения, такой как padding-top: 50% & padding-bottom: 50%, поэтому из этой техники в circle будет реагировать и изменять ее размер в соответствии с родительской шириной div.

.circle {
  background-color: #E94954;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 15px;
  height: 0;
  width: 100%;
  padding-top: 50%;
  padding-bottom: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle p{
  margin: 0;
  font-size: 90%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container my-3">
  <div class="row no-gutters justify-content-center">
    <div class="col-sm-5 col-md-4 col-lg-3">
      <div class="d-flex justify-content-center align-items-center">
        <div class="col-5 px-0">
          <div class="circle">
            <p>Circle 1</p>
          </div>
          <div class="circle">
            <p>Circle 3</p>
          </div>
          <div class="circle">
            <p>Circle 5</p>
          </div>
        </div>
        <div class="col-5 px-0">
          <div class="circle">
            <p>Circle 2</p>
          </div>
          <div class="circle">
            <p>Circle 4</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-7 col-md-8 col-lg-7">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
</div>

Answer 2

Простая идея с использованием flex, вы также можете использовать BS flex классы

.box {
    display: flex;
        align-items: center;
}
.containerr {
  display: flex;
  flex-direction: column;
      margin-right: 16px;
}
.holder {
  margin: 1%;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  
   background: red;
}
.holder:before {
  content: "";
  display: inline-block;
  padding-top: 100%;
}

<div class="box">
<div class="containerr">
  <div class="holder "></div>
  <div class="holder "></div>
  <div class="holder "></div>
</div>
<div class="containerr">
  <div class="holder "></div>
  <div class="holder "></div>
</div>
</div>

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>
<style>
    .block {
    text-align: center;
    vertical-align: middle;
}
.circle {
    background-color: darkred;
    color: white;
    border-radius: 200px;
    height: 110px;
    width: 110px;
    display: table;
    margin-bottom:1vw;

}
.circle p {
    vertical-align: middle;
    display: table-cell;

}
    </style>
<body>

<!--Circles-->
    <div class="row no-gutters justify-content-center">
      <div class="col-lg-1 ">
        <div class="col-lg-2 block">
          <div class="circle">
            <p>Circle 1</p>
          </div>
        </div>

        <div class="col-lg-1 block ">
          <div class="circle  ">
            <p>Circle 3</p>
          </div>
        </div>

        <div class="col-lg-1 block ">
          <div class="circle  ">
            <p>Circle 5</p>
          </div>
        </div>
<!-- Text-->
      </div>
      <div style="margin-top: 4vw; margin-left: -2 vw;"class="col-lg-1 ">
       <div class="col-lg-1 block ">
          <div class="circle  ">
            <p>Circle 2</p>
          </div>
        </div>
 <div class="col-lg-1 block   ">
          <div class="circle  ">
            <p>Circle 4</p>
          </div>
        </div>
        </div>
      <div  class="col-lg-3 ">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua.
        </p>
      </div>
    </div>
</body>
</html>