membuat tiga titik secara vertikal dengan rentang dan menyelaraskannya

Saya mencoba membuat tiga titik vertikal dan menyelaraskan kiri bawah wadah saya dengan css dan bootstrap 5. persis seperti gambar di bawah ini:

masukkan deskripsi gambar di sini

HTML dan CSS saya:

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

ini keluaran saya masukkan deskripsi gambar di sini

bagaimana cara menyelaraskan secara vertikal dan memindahkannya ke kiri bawah wadah? karena ketika saya menggunakan div untuk membungkusnya, mereka menghilang


html alignment css bootstrap-5
person CaRL    schedule 18.12.2020    source sumber

Jawaban (2)


arrow_upward
2
arrow_downward

1: bungkus titik-titik dalam wadah. Saya menggunakan bagian dengan kelas: .dot-wrapper. Kedua: beri pembungkusnya width: min-content;. Dengan itu, lebarnya hanya sebesar titik yang dipilih. Ketiga: untuk memusatkan titik-titik, beri margin kiri dan kanan otomatis;

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

person tacoshy    schedule 18.12.2020

arrow_upward
2
arrow_downward

caranya cukup mudah, kamu bisa membungkus titik-titik tersebut dengan tanda div container seperti ini

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

dan tata wadahnya seperti di bawah ini

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

dan untuk penataan yang lebih baik. berikan dot kelas beberapa amrgin seperti margin: 3px 0;

ini kodepennya: https://codepen.io/shammlo/pen/QWKggNX?editors=1100

person sham    schedule 18.12.2020