Perbedaan Container dan Container-Fluid pada Bootstrap

Halo teman-teman, Kali ini saya ingin berbagi tentang perbedaan fungsi class .container dan class .container-fluid pada Bootstrap. Bootstrap sendiri memiliki dua class container yang berbeda fungsi. Untuk mengetahui seperti apa fungsi dari masing-masing class container ini mari kita lihat penjelasannya pada artikel ini.

Disini saya tidak lagi memberitahu cara menghubungkan file HTML dengan file Bootstrap ya.. oke langsung kita simak saja penjelasannya..

1.       Container

Container sendiri jika diterjemahkan adalah Kontainer, yang berarti tempat untuk menampung, atau menaruh sesuatu.

Nah sekarang kita coba praktekan dulu dengan membuat html menggunakan class .container

Buat sebuah html yg sudah dipasang plugin bootstrap, dan ketikan kode berikut pada tag <body>

Jika sudah, saat kita test akan jadi seperti ini

dan saat halaman di zoom maka ukuran paragraf nya akan statis.. tidak akan berubah-ubah..

2.       Container Fluid

Seperti namanya sendiri yaitu “fluid” yang berarti cair, maka seperti itulah fungsi dari class .container-fluid untuk lebih jelasnya langsung kitasimak saja contoh berikut.

Pertama, kita buat template seperti berikut,

Maka jika di test akan terlihat tampilan seperti berikut

Dan ketika di zoom, isi kontent tersebut akan menyebar secara merata seperti ini..

Jadi semua tergantung kebutuhan kawan Dumenity untuk menggunakan class .container atau .container-fluid

Demikian artikel tentang perbedaan class container dan container-fluid pada bootstrap. Semoga artikel kali ini dapat bermanfaat