creating three dots vertically with span and align them - html

Question

I'm trying to create three vertical dots and align the bottom left of my container with css and bootstrap 5. exactly like the pic below:
my HTML and 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>
this is my output
how can i align the vertically and move them to bottom left of container? because when i use div for wrapping they disappear

Answer 1

1st: wrap the dots in a container. I used a section with the class: .dot-wrapper.
2nd: give the wrapper a width: min-content;. With that, it will only be as wide as the seclected dot.
3rd: to cenetr the dots, give them a margin left and right of auto;
.dot {
border-radius: 50%;
height: 12px;
width: 12px;
background: linear-gradient(90deg, #76b3fe, #8680e4);
margin: 5px auto;
}
.selected-dot {
height: 20px;
width: 20px;
background: #97cdfe;
}
.dot-wrapper {
width: min-content;
}
<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>
<section class="dot-wrapper">
<div class="dot selected-dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</section>
</section>

Answer 2

it's quite easy, you can wrap the dots with a div container like this
<!--Column Dots -->
<div class="dot-container">
<span class="dot selected-dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
and style the container as below
.dot-container{
width: 15px;
display: flex;
flex-direction:column;
align-items:center;
}
and for better styling. give dot class some amrgin like margin: 3px 0;
here is a codpen : https://codepen.io/shammlo/pen/QWKggNX?editors=1100