Program Auto Margins dalam Bootstrap

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

Sumber : Getbootstrap.com

Flexbox bisa melakukan hal-hal yang cukup hebat saat Anda mencampurkan penyejajaran fleksibel dengan margin otomatis. Berikut ini adalah tiga contoh pengendalian item fleksibel melalui margin otomatis: default (tanpa margin otomatis), mendorong dua item ke kanan (.mr-auto), dan mendorong dua item ke kiri (.ml-auto).

Sayangnya, IE10 dan IE11 tidak mendukung margin otomatis dengan benar pada item fleksibel yang parent-nya memiliki nilai justify-content yang bukan default. Lihat Jawaban StackOverflow ini untuk lebih banyak detail.

<div class="d-flex">
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
    <div class="mr-auto p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="ml-auto p-2">Flex item</div>
</div>

a. Dengan Align-Item

Anda dapat memindahkan satu item fleksibel ke bagian atas atau bawah wadah dengan mencampur align-items, flex-direction: column, dan margin-top: auto atau margin-bottom: auto.

<div class="d-flex">
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
    <div class="mr-auto p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="ml-auto p-2">Flex item</div>
</div>

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

Terima Kasih 😀😊😘👌👍 :)