Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membuat Align Content dalam Bootstrap.
Sumber : Getbootstrap.com
Gunakan utilitas align-content pada kontainer flexbox untuk menyelaraskan item flex bersama-sama pada sumbu lintang. Pilih dari start (default browser), end, center, between, around, atau stretch. Untuk mendemonstrasikan utilitas ini, kami telah memberlakukan flex-wrap: wrap dan meningkatkan jumlah item flex.
Perhatian! Properti ini tidak berpengaruh pada baris tunggal item flex.
a. Align Content Start
<div class="d-flex align-content-start flex-wrap">...</div>
Contoh :
<div class="d-flex flex-wrap align-content-start" style="height: 200px"><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div></div>
Output :
b. Align Content End
<div class="d-flex align-content-end flex-wrap">...</div>
Contoh :
<div class="d-flex flex-wrap align-content-end" style="height: 200px"><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div></div>
Output :
c. Align Content Center
<div class="d-flex align-content-center flex-wrap">...</div>
Contoh :
<div class="d-flex flex-wrap align-content-center" style="height: 200px"><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div></div>
Output :
d. Align Content Between
<div class="d-flex align-content-between flex-wrap">...</div>
Contoh :
<div class="d-flex flex-wrap align-content-between" style="height: 200px"><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div></div>
Output :
e. Align Content Around
<div class="d-flex align-content-around flex-wrap">...</div>
Contoh :
<div class="d-flex flex-wrap align-content-around" style="height: 200px"><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div></div>
Output :
f. Align Content Stretch
<div class="d-flex align-content-stretch flex-wrap">...</div>
Contoh :
<div class="d-flex flex-wrap align-content-stretch" style="height: 200px"><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div><div class="p-2 border bg-success">Flex Item</div></div>
Output :
Variasi responsif juga ada untuk align-content.
- .align-content-start
- .align-content-end
- .align-content-center
- .align-content-around
- .align-content-stretch
- .align-content-sm-start
- .align-content-sm-end
- .align-content-sm-center
- .align-content-sm-around
- .align-content-sm-stretch
- .align-content-md-start
- .align-content-md-end
- .align-content-md-center
- .align-content-md-around
- .align-content-md-stretch
- .align-content-lg-start
- .align-content-lg-end
- .align-content-lg-center
- .align-content-lg-around
- .align-content-lg-stretch
- .align-content-xl-start
- .align-content-xl-end
- .align-content-xl-center
- .align-content-xl-around
- .align-content-xl-stretch
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)
Tags
Kode Program