Menggunakan Container Bootstrap 4

Pada bagian sebelumnya, kita sudah membahas tentang beberapa elemen yang dibutuhkan oleh Bootstrap yaitu Container.

Container pada Bootstrap dapat kita gunakan sebagai tempat/wadah bagi konten yang ada di dalamnya dan terdapat dua Class Container yang tersedia antara lain:
  • .container - menyediakan Container dengan lebar Fixed (tetap) dan responsif.
  • .container-fluid - menyediakan Container lebar Full (Penuh/Full Width) dan mencakup seluruh lebar dari viewport.
Bootstrap 4 Container



Bootstrap 4: Fixed Container

Kita dapat menggunakan Class .container untuk membuat Container yang lebarnya tetap (Fixed) dan responsif.

Perhatikan bahwa lebar (lebar maksimal) dari Container akan berubah pada ukuran layar yang berbeda-beda. Berikut adalah ukuran lebar maksimal dari Container Bootstrap:

Sangat Kecil
< 576px
Kecil
≥ 576px
Sedang
≥ 768px
Besar
≥ 992px
Sangat Besar
≥ 1200px
max-width (Lebar maksimal)100%540px720px960px1140px

Sebagai contoh langsungnya, bukalah Live Demo berikut dan ubahlah ukuran jendela Browser untuk melihat bahwa lebar Container akan berubah pada breakpoint yang berbeda:

<div class="container">
  <h1>Halaman Bootstrap</h1>
  <p>Bagian ini berada di dalam Class .container.</p>
  <p>Class .container dapat menyediakan Container yang Responsive.</p>
  <p>Resize (ubah ukuran) jendela Browser untuk melihat bahwa ukuran maksimal (max-width) akan berubah pada Breakpoint yang berbeda.</p>
</div>

Lihat kode di Github | Lihat Live Demo

Bootstrap 4: Fluid Container

Kita dapat menggunakan Class .container-fluid untuk membuat Container yang lebarnya full (Fluid/Full-Width) 100% menjangkau seluruh lebar layar dan responsif. Lihatlah contoh berikut:

<div class="container-fluid">
  <h1>Halaman Bootstrap</h1>
  <p>Bagian ini berada di dalam Class .container-fluid.</p>
  <p>Class .container-fluid dapat menyediakan Container yang lebarnya Full 100% dan Responsive.</p>
</div>

Lihat kode di Github | Lihat Live Demo

Bootstrap 4: Container Padding

Secara default, Container memiliki Padding kiri dan kanan sebanyak 15px serta Padding atas dan bawah yaitu 0. Oleh karena itu, disarankan untuk menggunakan Utility seperti membuat Margin dan Padding tambahan agar dapat menjadikannya terlihat lebih baik. Misalnya, Class .pt-3 (Padding Top) dapat berarti "Menambahkan Padding atas sebanyak 16px". Perhatikanlah contoh berikut:

<div class="container pt-3"></div>

Lihat kode di Github | Lihat Live Demo

Catatan: Untuk selebihnya, hal ini akan kita bahas pada bagian yang akan datang.

Bootstrap 4: Warna dan Border Container

Utility lain seperti Border (garis batas) dan warna juga sering digunakan bersamaan dengan Container. Perhatikan contoh berikut:
Bootstrap 4: Warna dan Border Container

Berikut adalah contoh kodenya:

<div class="container p-3 my-3 border"></div>
<div class="container p-3 my-3 bg-dark text-white"></div>
<div class="container p-3 my-3 bg-primary text-white"></div> 

Lihat kode di Github | Lihat Live Demo

Catatan: Untuk selebihnya, hal ini akan kita bahas pada bagian yang akan datang.

Bootstrap 4: Responsive Container

Kita juga dapat menggunakan Class seperti .container-sm (Small), .container-md (Medium), .container-lg (Large), dan .container-xl (Extra Large) untuk membuat Container yang Responsive.

Ukuran lebar maksimal (max-width) dari Container akan berubah pada ukuran layar/Viewport yang berbeda. Berikut adalah informasi dari ukuran Container:

Class Sangat Kecil
< 576px
Kecil
≥ 576px
Sedang
≥ 768px
Besar/Luas
≥ 992px
Sangat Besar/Luas
≥ 1200px
.container-sm100%540px720px960px1140px
.container-md100%100%720px960px1140px
.container-lg100%100%100%960px1140px
.container-xl100%100%100%100%1140px

Untuk lebih jelasnya, perhatikan contoh kode berikut:

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div> 

Lihat kode di Github | Lihat Live Demo

Referensi dan Sumber

  • GetBootstrap
  • W3Schools
  • Github
  • RawGithack

0 Komentar