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.

Mengatur Align Grid Horizontal pada Bootstrap 4

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.

29 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat