Hallo teman-teman Dumet School, kembali lagi dengan saya shelli ripati. Kali ini saya akan membahas tentang Cara Mengatur Vertical Alignment Dengan Bootstrap 4. Dimana Vertical Alignment berfungsi mengatur posisi align kolom secara Vertical dengan menggunakan class yag sudah disediakan di bootstrap 4.

Untuk dapat mengetahui  Cara Mengatur Vertical Alignment Dengan Bootstrap 4 kita langsung saja membuat struktur htmlnya seperti pada script di bawah ini. Teman-teman bisa salin scriptnya.

Disini teman-teman jangan lupa cek kembali link bootstrap 4 nya. Kebetulan saya menggunakan bootstrap 4 secara online. Kemudian jika sudah selesai teman-teman simpan dengan format html. Dan jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.

Tampilan versi laptop

Cara Mengatur Vertical Alignment Dengan Bootstrap 4

Tampilan versi mobile

Cara Mengatur Vertical Alignment Dengan Bootstrap 4

Jika teman-teman perhatikan class align content memberikan posisi alignment secara Vertical dengan berbeda-beda posisinya. Berikut penjelasan masing-masing classnya ya.

  • align-self-start memberikan posisi alignment secara vertical dengan posisi column berada di paling atas diantara column yang lain.
  • align-self-center memberikan posisi alignment secara vertical dengan posisi column berada di paling center diantara column yang lain.
  • align-self-end memberikan posisi alignment secara vertical dengan posisi column berada di paling bawah diantara column yang lain.

Demikian artikle tentang Cara Mengatur Vertical Alignment Dengan Bootstrap 4. Semoga bermanfaat buat teman-teman, sampai jumpa di pembahasan selanjutnya dan selamat mencoba ya. Terima Kasih