Kode Program
Original PostProgram Align Items dalam Bootstrap
02 Feb 2024 0
Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membuat Align Item dalam Bootstrap.
Sumber : Getbootstrap.com
Gunakan utilitas align-items pada kontainer flexbox untuk mengubah penataan item flex pada sumbu lintang (sumbu y untuk memulai, sumbu x jika flex-direction: column). Pilih di antara start, end, center, baseline, atau stretch (default browser).
<div class="d-flex align-items-start">...</div><div class="d-flex align-items-end">...</div><div class="d-flex align-items-center">...</div><div class="d-flex align-items-baseline">...</div><div class="d-flex align-items-stretch">...</div>
Contoh :
<div class="container mt-3"><div class="d-flex flex-wrap align-items-start bg-light"style="height:70px"><div class="p-2 border bg-success">Flex 1</div><div class="p-2 border bg-success">Flex 2</div><div class="p-2 border bg-success">Flex 3</div></div><div class="d-flex flex-wrap align-items-end bg-light"style="height:70px"><div class="p-2 border bg-success">Flex 1</div><div class="p-2 border bg-success">Flex 2</div><div class="p-2 border bg-success">Flex 3</div></div><div class="d-flex flex-wrap align-items-center bg-light"style="height:70px"><div class="p-2 border bg-success">Flex 1</div><div class="p-2 border bg-success">Flex 2</div><div class="p-2 border bg-success">Flex 3</div></div><div class="d-flex flex-wrap align-items-around bg-light"style="height:70px"><div class="p-2 border bg-success">Flex 1</div><div class="p-2 border bg-success">Flex 2</div><div class="p-2 border bg-success">Flex 3</div></div><div class="d-flex flex-wrap align-items-stretch bg-light"style="height:70px"><div class="p-2 border bg-success">Flex 1</div><div class="p-2 border bg-success">Flex 2</div><div class="p-2 border bg-success">Flex 3</div></div><br></div>
Output :
Variasi responsif juga ada untuk align-items.
- .align-items-start
- .align-items-end
- .align-items-center
- .align-items-baseline
- .align-items-stretch
- .align-items-sm-start
- .align-items-sm-end
- .align-items-sm-center
- .align-items-sm-baseline
- .align-items-sm-stretch
- .align-items-md-start
- .align-items-md-end
- .align-items-md-center
- .align-items-md-baseline
- .align-items-md-stretch
- .align-items-lg-start
- .align-items-lg-end
- .align-items-lg-center
- .align-items-lg-baseline
- .align-items-lg-stretch
- .align-items-xl-start
- .align-items-xl-end
- .align-items-xl-center
- .align-items-xl-baseline
- .align-items-xl-stretch
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)
.png)
.png)
.png)