Containers Pada Bootstrap 4 – Teman-teman berada di tutorial bootstrap 4 bagian ketiga, dalam seri tutorial bootstrap 4 terlengkap dari dasar hingga mahir berbahasa indonesia.

Pada tutorial bootstrap 4 ketiga ini akan di bahas tentang container pada bootstrap. apa itu container ? bagaimana cara menggunakannya ? dan apa kegunaan container pada bootstrap ?

Akan kita bahas tuntas pada tutorial Tutorial Bootstrap 4 #3 : Containers Pada Bootstrap 4 ini.

Bagi teman-teman yang belum mengikuti tutorial sebelumnya, silahkan baca Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4 terlebih dulu.

Containers Pada Bootstrap 4

Containers adalah element layout yang paling dasar pada bootstrap. kita wajib menggunakan containers jika ingin menggunakan sistem grid bootstrap.

Apa itu sistem grid bootstrap ? grid sistem bootstrap akan kita pelajari pada tutorial selanjutnya. yang penting pada tutorial ini, teman-teman harus paham dulu tentang pengertian dan cara menggunakan containers saja dulu.

Supaya lebih paham ketika masuk ke materi sistem grid bootstrap di tutorial selanjutnya.

Ada 2 jenis containers pada bootstrap, yaitu container dan container-fluid.

Container

Container bisa kita anggap sebagai wadah yang menampung semua element grid sistem atau element lain nya dari bootstrap.

Jika teman-teman pernah melihat website yang ukuran lebar layoutnya tidak penuh, berarti website tersebut menggunakan container untuk lebar layoutnya, sebaliknya jika menggunakan container-fluid, tampilan layout websitenya akan berukuran penuh.

Sekarang kita akan membuat contoh untuk penggunaan container. buka file belajar_bootstrap.html yang sudah dibuat pada tutorial sebelumnya. dan ketik coding berikut.

belajar_bootstrap/belajar_bootstrap.html

Perhatikan pada contoh penggunaan container di atas, untuk menggunakan container kita tinggal menambahkan class container pada element paling luar. untuk membungkus element-element lainnya.

Adapun element yang dibungkus oleh container ini kita buat contoh dengan element div yang menggunakan class bg-primary, text-white, dan text-center.

Kemudian di dalamnya ada heading h4, dan element hyperlink.

NOTE :

class bg-primary adalah class yang disediakan oleh bootstrap 4 untuk membuat background warna bitu.
text-white adalah class yang disediakan oleh bootstrap 4 untuk membuat tulisan text menjadi warna putih.
dan class text-center adalah class untuk memindahkan letak text ke tengah.

Sekarang kita lihat hasilnya.

Jalankan file belajar_bootstrap.html

Seperti yang terlihat pada gambar di atas, element container berukuran tidak penuh lebarnya. dan letaknya di tengah.

Selanjutnya kita lihat contoh container-fluid.

Container-fluid

Jika container berukuran tidak penuh, dan letaknya di tengah, maka container-fluid adalah kebalikannya, container-fluid memiliki lebar penuh.

Perhatikan gambar dan coding berikut.

Selanjutnya kita buat contoh untuk penggunaan container-fluid.

Perhatikan coding berikut.

belajar_bootstrap/belajar_bootstrap.html

dan kita lihat hasilnya

Seperti yang terlihat pada gambar di atas, class container-fluid memiliki ukuran yang lebar penuh.

Untuk penggunaan masing-masing dari container dan container-fluid tinggal teman-teman sesuaikan saja sesuai kebutuhan desain tampilan website yang ingin teman-teman buat.

Oke sekian Tutorial Bootstrap 4 #3 : Containers Pada Bootstrap 4. pada tutorial selanjutnya kita akan masuk ke materi sistem grid pada bootstrap untuk membuat element website yang responsive.

Download Source Code

 

Incoming search terms:

• https://www malasngoding com/containers-pada-bootstrap-4/
• container language:id
• container pada html
• Container pada bootstrap
• Fungsi class container
• mengatur ukuran fluid container
• fungsi container pada boostrap
• contoh container di html
• Tutorial Bootstrap 4 #3 :
• fungsi container pada html