Program Flex Arrow dalam Bootstrap

Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membuat Flex Arrow dalam Bootstrap.

Sumber : Getbootstrap.com

Atur arah item fleksibel dalam wadah fleksibel dengan utilitas arah. Dalam kebanyakan kasus, Anda dapat menghilangkan kelas horizontal di sini karena default browser adalah baris. Namun, Anda mungkin menghadapi situasi di mana Anda perlu menetapkan nilai ini secara eksplisit (seperti tata letak responsif).

Gunakan .flex-row untuk mengatur arah horizontal (default browser), atau .flex-row-reverse untuk memulai arah horizontal dari sisi yang berlawanan.

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Gunakan .flex-column untuk mengatur arah vertikal, atau .flex-column-reverse untuk memulai arah vertikal dari sisi yang berlawanan.

<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Variasi responsif juga ada untuk flex-direction.

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse

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

Terima Kasih 😀😊😘👌👍 :)