Создание трех точек по вертикали с интервалом и выравнивание их

Я пытаюсь создать три вертикальные точки и выровнять нижний левый угол моего контейнера с помощью 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 для упаковки, они исчезают

🤔 А знаете ли вы, что...
HTML может вставлять изображения, аудио и видео на веб-страницы с помощью соответствующих тегов.

[РЕШЕНО]Перейти к решению

1 053

Html113619 вопросов Css75481 вопрос Alignment714 вопросов Bootstrap 5461 вопрос

Ответы:

это довольно просто, вы можете обвести точки div container вот так

<!--Column Dots -->
<div class = "dot-container">
  <span class = "dot selected-dot"></span>
  <span class = "dot"></span>
  <span class = "dot"></span>
</div>

и стилизуйте контейнер, как показано ниже

.dot-container{
width: 15px;
display: flex;
flex-direction:column;
align-items:center;
}

и для лучшего стиля. подарите dot классу лайк margin: 3px 0;

вот кодпен: https://codepen.io/shammlo/pen/QWKggNX?editors=1100

Решено

1-й: заверните точки в контейнер. Я использовал раздел с классом: .dot-wrapper. 2-й: дайте обертке width: min-content;. При этом он будет такой же ширины, как и выбранная точка. 3-й: чтобы центрировать точки, дайте им поле слева и справа от авто;

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

Создание трех точек по вертикали с интервалом и выравнивание их

Ответы:

Интересные вопросы для изучения