I was making a website from a design, and it has a div with this:

I was trying to make it, but I don't really know how to do it.

This is what I have ( I know that is not too much, but I don't know how to continue )

<div class="logos card-deck row m-auto dflex align-items-center justify-content-center">
      <div class="card cardLogos col-lg-4 col-md-3 col-sm-12">
              <div class="cardTitle "><a href="#" target="_blank"><img data-aos="fade-up" src="assets/images/hostinger.svg" width="64px" alt="Descentraliced"></a></div>
      </div>
</div>

CodePudding user response：

1. Create a containe with flexbox: <div ></div>
2. Create 5 columns by adding 5 child-wrappers with: <div ></div>
3. Place the cards inside those child-wrappers (flex-direction: column).
4. use the gap-class to space them apart.

/* for demonstration purpose only */
.demo-div {
  height: 15vh;
  width: 17vw;
  background-color: red;
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="d-flex flex-row justify-content-center gap-2">

  <div class="d-flex flex-column justify-content-center gap-2">
    <div class="demo-div"></div>
  </div>
  
  <div class="d-flex flex-column justify-content-center gap-2">
    <div class="demo-div"></div>
    <div class="demo-div"></div>
  </div>
  
  <div class="d-flex flex-column justify-content-center gap-2">
    <div class="demo-div"></div>
    <div class="demo-div"></div>
    <div class="demo-div"></div>
  </div>
  
  <div class="d-flex flex-column justify-content-center gap-2">
    <div class="demo-div"></div>
    <div class="demo-div"></div>
  </div>
  
  <div class="d-flex flex-column justify-content-center gap-2">
    <div class="demo-div"></div>
  </div>
  
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>