Penggunaan Float dalam Bootstrap

Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membahas tentang Penggunaan Float dalam Bootstrap.

Sumber : Getbootstrap.com

Alihkan Float pada elemen mana saja, melintasi breakpoint mana saja, menggunakan utilitas float responsif kami.

1. Ikhtisar

Kelas utilitas ini mengapungkan elemen ke kiri atau kanan, atau menonaktifkan pengambangan, berdasarkan ukuran viewport saat ini menggunakan properti float CSS. !important disertakan untuk menghindari masalah spesifisitas. Kelas-kelas ini menggunakan breakpoint viewport yang sama dengan sistem grid kami. Harap diperhatikan bahwa utilitas float tidak berpengaruh pada item fleksibel.

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

2. Responsif

Variasi responsif juga ada untuk setiap nilai float.

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Berikut semua kelas dukungan :

• .float-start
• .float-end
• .float-none
• .float-sm-start
• .float-sm-end
• .float-sm-none
• .float-md-start
• .float-md-end
• .float-md-none
• .float-lg-start
• .float-lg-end
• .float-lg-none
• .float-xl-start
• .float-xl-end
• .float-xl-none
• .float-xxl-start
• .float-xxl-end
• .float-xxl-none

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)