Program Membuat Wrap dalam Bootstrap

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 😀😊😘👌👍 :)