Kode Program
Original PostProgram Membuat Wrap dalam Bootstrap
10 Oct 2025 0
Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membuat Wrap dalam Bootstrap.
Sumber : Getbootstrap.com
Ubah cara item fleksibel dibungkus dalam wadah fleksibel. Pilih dari tanpa pembungkus sama sekali (default browser) dengan .flex-nowrap, pembungkus dengan .flex-wrap, atau pembungkus mundur dengan .flex-wrap-reverse.
a. Flex No-Wrap
<div class="d-flex flex-nowrap"><div class="p-2 border bg-success">Flex Item</div>...</div>
Contoh :
<div class="d-flex flex-nowrap text-white"><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 class="p-2 border bg-success">Flex Item</div></div>
Output :
b. Flex Wrap
<div class="d-flex flex-wrap"><div class="p-2 border bg-success">Flex Item</div>...</div>
Contoh :
<div class="d-flex flex-wrap text-white"><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 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. Flex Wrap Reverse
<div class="d-flex flex-wrap-reverse"><div class="p-2 border bg-success">Flex Item</div>...</div>
Contoh :
<div class="d-flex flex-wrap-reverse text-white"><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 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 tersedia untuk Bungkus Flex.
- .flex-nowrap
- .flex-wrap
- .flex-wrap-reverse
- .flex-sm-nowrap
- .flex-sm-wrap
- .flex-sm-wrap-reverse
- .flex-md-nowrap
- .flex-md-wrap
- .flex-md-wrap-reverse
- .flex-lg-nowrap
- .flex-lg-wrap
- .flex-lg-wrap-reverse
- .flex-xl-nowrap
- .flex-xl-wrap
- .flex-xl-wrap-reverse
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)
.png)
.png)
.png)