Program Offsetting Columns dalam Bootstrap

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

Sumber : Getbootstrap.com

Anda dapat menggeser kolom grid dengan dua cara: kelas .offset-grid responsif kami dan utilitas margin kami. Kelas grid diukur untuk cocok dengan kolom sedangkan margin lebih berguna untuk tata letak cepat di mana lebar offset variabel.

a. Kelas Offset

Geser kolom ke kanan menggunakan kelas .offset-md-*. Kelas-kelas ini meningkatkan margin kiri kolom sebesar * kolom. Misalnya, .offset-md-4 memindahkan .col-md-4 sejauh empat kolom.

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Hasil :

Selain membersihkan kolom pada breakpoint responsif, Anda mungkin perlu mereset offset. Lihat contoh ini dalam tata letak grid.

<div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">
      .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
    </div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">
      .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
    </div>
</div>

Hasil :

b. Utilitas Margin

Dengan beralih ke flexbox dalam v4, Anda dapat menggunakan utilitas margin seperti .mr-auto untuk memaksa kolom saudara menjauh satu sama lain.

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
<div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
</div>

Hasil :

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

Terima Kasih 😀😊😘👌👍 :)