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>

bootstrap container class

 

Jika sudah, saat kita test akan jadi seperti ini

bootstrap container class

 

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

container class bootstrap

 

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,

container-fluid class bootstrap

 

Maka jika di test akan terlihat tampilan seperti berikut

bootstrap container-fluid class

 

Dan ketika di zoom, isi kontent tersebut akan menyebar secara merata seperti ini..container-fluid bootsrap class

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

31 Agustus 2015

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