Pada kesempatan kali ini saya akan menjelaskan cara mengatur tata letak flex bootstrap 4. Perlu teman-teman ketahui sebelumnya, perbedaan antara Bootstrap 3 dengan Bootstrap 4 adalah dimana Bootstrap 4 saat ini sudah menggunakan flexbox untuk menangani tata letak suatu element. Dari flexbox tersebut bisa mempermudah  untuk merancang struktur tata letak suatu element yang fleksibel tanpa penentuan posisi.

Untuk mengatur tata letak suatu element flexbox di sebelah kiri, teman-teman bisa menggunakan class justify-content-start. Untuk mengatur tata letak suatu element flexbox berada disebelah kanan, teman-teman bisa menggunakan class Untuk mengatur tata letak suatu element flexbox di sebelah kiri, teman-teman bisa menggunakan class justify-content-end. Sedangkan Untuk mengatur tata letak suatu element flexbox berada ditengah-tengah layar, teman-teman bisa menggunakan class justify-content-center.

Berikut tahapannya :

  • Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
  • Jika sudah selanjutnya ketikan seperti kode berikut:

Sampai disini penjelasan saya mengenai cara mengatur tata letak flex bootstrap 4, semoga bermanfaat.

WhatsApp chat