Я пытаюсь создать три вертикальные точки и выровнять нижний левый угол моего контейнера с помощью css и bootstrap 5. точно так же, как на картинке ниже:
мой HTML и CSS:
.dot {
border-radius: 50%;
height: 12px;
width: 12px;
background: linear-gradient(90deg, #76b3fe, #8680e4);
}
.selected-dot {
height: 20px;
width: 20px;
background: #97cdfe;
}
<section class="slider-bg-1 d-flex align-items-end">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5 d-flex flex-column justify-content-center pt-4 pt-lg-0 order-2 order-lg-1">
<h1 class="head-font-size">Choose a powerful design for your Start-up</h1>
<h6 claas="caption-text-color">Get your freebie template now</h6>
<div class="d-lg-flex">
<div class="mt-5"><button class="my-btn" type="submit">Discover</button></div>
</div>
</div>
<div class="col-lg-5 col-md-12 col-sm-12 order-1 order-lg-2 d-flex justify-content-center">
<img src="Assets/home-slider/slider-m-1.png" class="img-fluid img-slider" alt="">
</div>
</div>
</div>
<span class="dot selected-dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</section>
как я могу выровнять по вертикали и переместить их в нижний левый угол контейнера? потому что, когда я использую div для упаковки, они исчезают