04 Februari 2021

Container Pada Bootstrap 4

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

A. Pengertian Container

Container adalah Elemen Layout Paling Dasar di dalam Bootstrap. Elemen ini wajib dipanggil di awal pembuatan layout menggunakan bootstrap di dalam tag body (<body> </body>). Karena elemen ini yang nantinya akan mengendalikan sistem grid bootstrap sehingga lebar design web dapat menyesuaikan lebar device yang digunakan untuk membuka halaman web tersebut. Istilahnya menjadikan halaman web responsive.

Container bisa dibayangkan sebagai wadah yang nantinya berisi semua elemen grid sistem bootstrap maupun elemen - elemen selain miliknya bootstrap.

Container dipanggil di dalam tag div dengan menggunakan selector class.

Container Bootstrap 4

B. Jenis - Jenis Container Bootstrap 4

Di dalam bootstrap 4 terdapat 2 jenis container yaitu container dan container-fluid.

Container biasa menjadikan lebar layout design halaman web tidak full layar, masih ada sisa bagian kosong yang cukup lebar di kanan - kiri tampilan layar. Sedangkan saat menggunakan container-fluid maka tampilan layout halaman web full layar.

Untuk penggunaan container ataupun container-fluid tinggal disesuaikan kebutuhan tampilan website yang sedang dibuat.

Contoh Penggunaan Container :

Penggunaan container bootstrap 4Penggunaan container bootstrap 4

 Contoh Penggunaan Container-Fluid :

Penggunaan Container-Fluid Bootstrap 4
Penggunaan Container-Fluid Bootstrap 4

 Keterangan :

  • Class bg-primary adalah class milik bootstrap 4 untuk membuat background warna biru.
  • Class text-white adalah class milik bootstrap 4 untuk membuat tulisan berwarna putih.
  • Class text-center adalah class milik bootstrap 4 untuk meletakkan tulisan ditengah layar.

Semoga artikel ini bermanfaat.


Kembali ke menu Bootstrap 4 - Grid System pada Bootstrap 4

0 comments:

Posting Komentar