Mengatur Align Vertical Kolom Bootstrap 4

Dari sekian banyak cara menata layout grid pada bootstrap tentu ada saja yang mengalami kendala dalam menata layout yang benar. Jika kalian masih menggunakan bootstrap 3 mungkin kalian akan mengalami hal tersebut. Namun tahukah kalian bahwa pada update terbaru dalam versi bootstrap 4 terdapat banyak penambahan fitur yang sangat berguna  seperti beberapa hal yang telah saya bahas pada artikel yang berjudul Perubahan Sistem Grid Bootstrap 4 dan juga artikel tentang bagaimana Cara Menerapkan Kolom Auto pada Bootstrap 4

Selain fitur yang telah saya jelaskan pada artikel sebelumnya, system grid bootstrap 4 sekarang ini juga mengalami peningkatan dengan menambahkan fitur alignment pada kolom yang dibuatnya, alignment kolom bootstrap terbagi lagi menjadi dua, yaitu ada align secara vertical dan juga align secara horizontal contoh dalam penerapan align vertical adalah seperti berikut

Pada layout diatas kita mengatur layout seperti diatas kita menggunakan class .align-items-start, .align-items-center, dan class .align-items-end, dimana masing-masing class tersebut bertugas untuk mengatur keseluruhan item dalam satu class .row . Dengan begitu strukturnya akan menjadi seperti berikut

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

 

Yang kedua dari alignment vertical adalah kita bisa mengatur alignment dari masing-masing kolom secara terpisah seperti gambar berikut

Berikut ini adalah contoh penulisan struktur HTML dan Class bootstrap untuk layout diatas

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

 

Baiklah teman teman banyak sekali keunggulan dari bootstrap 4 yang telah memasuki versi beta ini, dan memang sebenarnya sudah cukup layak untuk dipakai dalam membangun website. Demikian pembahasan tentang Cara Mengatur Align Vertical Kolom Bootstrap 4, semoga bermanfaat.

23 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