Program Justify Content dalam Bootstrap

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

Sumber : Getbootstrap.com

Gunakan utilitas justify-content pada kontainer flexbox untuk mengubah penataan item flex pada sumbu utama (sumbu x untuk memulai, sumbu y jika flex-direction: column). Pilih di antara start (default browser), end, center, between, atau around.

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Contoh :

<div class="container mt-3">
  <br />
  <div class="d-flex justify-content-start bg-success mb-3 text-white">
    <div class="p-2 bg-success">Flex 1</div>
    <div class="p-2 bg-success">Flex 2</div>
    <div class="p-2 bg-success">Flex 3</div>
  </div>
  <div class="d-flex justify-content-end bg-success text-white">
    <div class="p-2 bg-success">Flex 1</div>
    <div class="p-2 bg-success">Flex 2</div>
    <div class="p-2 bg-success">Flex 3</div>
  </div>
  <br />
  <div class="d-flex justify-content-center bg-success text-white">
    <div class="p-2 bg-success">Flex 1</div>
    <div class="p-2 bg-success">Flex 2</div>
    <div class="p-2 bg-success">Flex 3</div>
  </div>
  <br />
  <div class="d-flex justify-content-between bg-success text-white">
    <div class="p-2 bg-success">Flex 1</div>
    <div class="p-2 bg-success">Flex 2</div>
    <div class="p-2 bg-success">Flex 3</div>
  </div>
  <br />
  <div class="d-flex justify-content-around bg-success text-white">
    <div class="p-2 bg-success">Flex 1</div>
    <div class="p-2 bg-success">Flex 2</div>
    <div class="p-2 bg-success">Flex 3</div>
  </div>
</div>

Output :

Variasi responsif juga ada untuk justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

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

Terima Kasih 😀😊😘👌👍 :)