Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membahas tentang Penggunaan Posisi (Positions) dalam Bootstrap.
Sumber : Getbootstrap.com
Gunakan utilitas singkat ini untuk mengonfigurasi posisi elemen dengan cepat.
1. Nilai Posisi
Kelas pemosisian cepat tersedia, meskipun tidak responsif.
<div class="position-static">...</div><div class="position-relative">...</div><div class="position-absolute">...</div><div class="position-fixed">...</div><div class="position-sticky">...</div>
2. Atur Elemen
Atur elemen dengan mudah menggunakan utilitas pemosisian tepi. Formatnya adalah {property}-{position}.
Dengan properti sebagai salah satu dari :
- top - untuk posisi vertikal atas
- start - untuk posisi horizontal kiri (dalam LTR)
- bottom - untuk posisi vertikal bawah
- end - untuk posisi horizontal kanan (dalam LTR)
Dengan position sebagai salah satu dari :
- 0 - untuk posisi tepi 0
- 50 - untuk posisi tepi 50%
- 100 - untuk posisi tepi 100%
(Anda dapat menambahkan lebih banyak nilai posisi dengan menambahkan entri ke variabel peta Sass $position-values.)
<div class="position-relative"><div class="position-absolute top-0 start-0"></div><div class="position-absolute top-0 end-0"></div><div class="position-absolute top-50 start-50"></div><div class="position-absolute bottom-50 end-50"></div><div class="position-absolute bottom-0 start-0"></div><div class="position-absolute bottom-0 end-0"></div></div>
3. Elemen Tengah
Selain itu, Anda juga dapat memusatkan elemen dengan kelas utilitas transformasi .translate-middle.
Kelas ini menerapkan transformasi translateX(-50%) dan translateY(-50%) ke elemen yang, jika dikombinasikan dengan utilitas pemosisian tepi, memungkinkan Anda untuk memusatkan elemen secara absolut.
<div class="position-relative"><div class="position-absolute top-0 start-0 translate-middle"></div><div class="position-absolute top-0 start-50 translate-middle"></div><div class="position-absolute top-0 start-100 translate-middle"></div><div class="position-absolute top-50 start-0 translate-middle"></div><div class="position-absolute top-50 start-50 translate-middle"></div><div class="position-absolute top-50 start-100 translate-middle"></div><div class="position-absolute top-100 start-0 translate-middle"></div><div class="position-absolute top-100 start-50 translate-middle"></div><div class="position-absolute top-100 start-100 translate-middle"></div></div>
Dengan menambahkan kelas .translate-middle-x atau .translate-middle-y, elemen hanya dapat diposisikan dalam arah horizontal atau vertikal.
<div class="position-relative"><div class="position-absolute top-0 start-0"></div><div class="position-absolute top-0 start-50 translate-middle-x"></div><div class="position-absolute top-0 end-0"></div><div class="position-absolute top-50 start-0 translate-middle-y"></div><div class="position-absolute top-50 start-50 translate-middle"></div><div class="position-absolute top-50 end-0 translate-middle-y"></div><div class="position-absolute bottom-0 start-0"></div><div class="position-absolute bottom-0 start-50 translate-middle-x"></div><div class="position-absolute bottom-0 end-0"></div></div>
Contoh :
Berikut adalah beberapa contoh nyata dari kelas-kelas tersebut :
<button type="button" class="btn btn-primary position-relative">Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span></button><button type="button" class="btn btn-dark position-relative">Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg></button><button type="button" class="btn btn-primary position-relative">Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span></button>
Anda dapat menggunakan kelas-kelas ini dengan komponen yang sudah ada untuk membuat yang baru. Ingatlah bahwa Anda dapat memperluas fungsinya dengan menambahkan entri ke variabel $position-values.
<div class="position-relative m-4"><div class="progress" style="height: 1px;"><div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div></div><button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button><button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button><button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button></div>
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)