Bootstrap 4 Kontainer
Wadah
Anda belajar dari bab sebelumnya bahwa Bootstrap memerlukan elemen yang mengandung untuk membungkus konten situs.
Wadah digunakan untuk memuat konten di dalamnya, dan ada dua kelas wadah yang tersedia:
- Kelas menyediakan wadah lebar tetap
.containeryang responsif - Kelas
.container-fluidmenyediakan wadah lebar penuh , yang mencakup seluruh lebar viewport
Kontainer Tetap
Gunakan .containerkelas untuk membuat wadah responsif dengan lebar tetap.
Perhatikan bahwa lebarnya ( max-width) akan berubah pada ukuran layar yang berbeda:
|
Ekstra kecil <576px |
Kecil 576px |
Sedang 768px |
Besar 992px |
Ekstra besar 1200px |
|
|---|---|---|---|---|---|
| lebar maksimum | 100% | 540px | 720px | 960px | 1140px |
Buka contoh di bawah dan ubah ukuran jendela browser untuk melihat bahwa lebar container akan berubah pada breakpoint yang berbeda:
Contoh
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Wadah Cairan
Gunakan .container-fluidkelas untuk membuat wadah lebar penuh, yang akan selalu menjangkau seluruh lebar layar ( widthselalu 100%):
Contoh
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Bantalan Kontainer
Secara default, container memiliki padding kiri dan kanan 15px, tanpa padding atas atau bawah. Oleh karena itu, kami sering menggunakan utilitas spasi , seperti bantalan ekstra dan margin agar terlihat lebih baik. Misalnya, .pt-3berarti "tambahkan padding atas 16px":
Contoh
<div class="container pt-3"></div>
Anda akan belajar lebih banyak tentang utilitas spasi, di Bab Utilitas BS4 kami .
Batas dan Warna Kontainer
Utilitas lain, seperti batas dan warna, juga sering digunakan bersama dengan wadah:
Contoh
Halaman Bootstrap Pertama Saya
Wadah ini memiliki batas dan beberapa bantalan dan margin tambahan.
Halaman Bootstrap Pertama Saya
Wadah ini memiliki warna latar belakang gelap dan teks putih, dan beberapa padding dan margin tambahan.
Halaman Bootstrap Pertama Saya
Wadah ini memiliki warna latar belakang biru dan teks putih, dan beberapa padding dan margin tambahan.
<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>
Anda akan belajar lebih banyak tentang warna dan utilitas batas, di Bab Warna BS4 dan Bab Utilitas BS4 kami .
Wadah Responsif
Anda juga dapat menggunakan .container-sm|md|lg|xlkelas untuk membuat wadah responsif.
Wadah max-widthakan berubah pada ukuran layar/area pandang yang berbeda:
| Kelas |
Ekstra kecil <576px |
Kecil 576px |
Sedang 768px |
Besar 992px |
Ekstra besar 1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
Contoh
<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>
Tahukah kamu?
W3.CSS adalah alternatif yang sangat baik untuk Bootstrap 4.
W3.CSS lebih kecil, lebih cepat, dan lebih mudah digunakan.
Jika Anda ingin mempelajari W3.CSS, buka Tutorial W3.CSS kami .