Le colonne contenenti cerchi si sovrappongono verticalmente in Bootrap 4

2020-02-14 html css bootstrap-4

Sto cercando di ottenere l'aspetto visualizzato nell'immagine seguente con "Bootstrap 4". Quello che ho ottenuto è in parte quello che voglio, perché c'è troppa distanza verticale tra i punti.

inserisci qui la descrizione dell'immagine

Prima ho provato a nidificare i col e poi ho usato i "margini" negativi, ma non ha aiutato ad avvicinare i cerchi verticalmente l'uno all'altro. È anche possibile "sovrapporre" i "cols" o devo trovare un altro modo per ottenere il look che desidero?

.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>

Answers

Una semplice idea che usa il flex è possibile usare anche le classi di flex BS

.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>

 <!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> 
 <!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> 
 <!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> 
 <!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> 
 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 
 <!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> 
 <!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> 
 <!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> 
 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 <!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> 
 

Puoi ottenere da Bootstrap4 classi predefinite.
Prendi un div e definisci class="d-flex justify-content-center align-items-center" e all'interno di questo div prendine un altro div con class="col-5 px-0" quindi nella parte sinistra div definisci il circle div 1 , 3,5 e div sul lato destro definiscono il circle div 2,4 ,
Per .circle definire width:100% , height:0 , quindi l'altezza sarà automaticamente uguale alla larghezza da questa tecnica di padding-top: 50% come padding-top: 50% e padding-bottom: 50% quindi da questa tecnica a circle risponderà e ridimensionerà come da larghezza div parent.

.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>

Related