Mengatur Align Grid Horizontal pada Bootstrap 4

Banyak sekali fitur baru yang bisa kita gunakan pada bootstrapversi terbaru, yaitu versi 4.0.0 beta. Versi beta sendiri adalah versi yangbisa dianggap layak untuk digunakan dalam pengembangan website, hanya saja versi beta sendiri adalah tingkatan dalam versi pengembangan sebuah program, dimana fitur utama dari program tersebut sudah selesai dibuat dan tinggal mengetes ketika digunakan dalam pengembangan dengan menerima feedback dari pengguna untuk menutupi bug atau celah yang masih tersisa.

Pada artikel kali ini kita masih membahas tentang bagian dari perubahan system grid pada bootstrap 4 Dimana pada artikel sebelumnya kita pernah membahas tentang cara mengatur align vertical pada kolom bootstrap 4, selanjutnya kita akan membahas tentang cara mengatur align horizontal pada bootstrap 4.

Cara mengatur align horizontal pada bootstrap 4 ini bertujuan untuk membuat konten grid pada bootstrap 4 bisa diatur peletakkannya sesuai keinginan kita secara horizontal. Contoh hasil dalam mengatur align horizontal pada bootstrap 4 adalah seperti berikut.

Penulisan struktur kode HTML dan Class bootstrap 4 untuk layout diatas bisa kalian tuliskan seperti ini:

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Pada penerapan horizontal align diatas kita bisa melihat ada 5 class yang bisa kita pakai sesuai seperti demo diatas. Baiklah teman-teman demikian artikel kali ini yang membahas tentang cara mengatur align grid horizontal pada bootstrap 4. Semoga bermanfaat.