Kontainer Bootstrap 5

Kontainer Bootstrap 5

Dari bab sebelumnya Anda belajar, Bootstrap memerlukan elemen untuk melingkungi konten situs.

Kami mengisi kontainer dengan konten, dan ada dua kelas kontainer yang tersedia:

  • .container kelas menyediakan kontainer lebar tetap responsif
  • .container-fluid kelas menyediakan kontainer lebar penuh, melintasi lebar viewport penuh

kontainer tetap

dengan .container kelas membuat kontainer responsif, lebar tetap.

Perhatikan, lebarnya (max-width）akan berubah di berbagai ukuran layar:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Silakan buka contoh di bawah ini dan geser ukuran jendela browser untuk melihat perubahan lebar kontainer di berbagai titik pemangkatan:

Contoh

<div class="container">
  <h1>Halaman Bootstrap Pertama Saya</h1>
  <p>Ini adalah beberapa teks.</p>
</div>

Coba Sendiri

Pemangkatan XXL (≥1400px) adalah penambahan baru di Bootstrap 5, sementara titik pemangkatan terbesar di Bootstrap 4 adalah Extra large (≥1200px).

kontainer cair

dengan .container-fluid kelas membuat kontainer lebar penuh, yang selalu melintasi lebar layar penuh (width Selalu 100%）：

Contoh

<div class="container-fluid">
  <h1>Halaman Bootstrap Pertama Saya</h1>
  <p>Ini adalah beberapa teks.</p>
</div>

Coba Sendiri

isasi kontainer

Secara baku, kontainer memiliki isasi kiri-kanan (margin internal kiri-kanan), tanpa isasi atas atau bawah (margin internal atas-bawah). Oleh karena itu, kami sering menggunakan alat penataan ruang（utility），seperti tambahanisasi dan margin, untuk membuatnya terlihat lebih baik. Contohnya,.pt-5 berarti "menambahkan suatu besarAtas：

Contoh

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

Coba Sendiri

Garis dan Warna Wadah

Garis dan Warna Wadah

Contoh

Alat lainnya, seperti garis dan warna, sering digunakan bersama wadah:
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>

Coba Sendiri

<div class="container p-5 my-5 bg-primary text-white"></div>

Anda akan belajar lebih banyak tentang alat warna dan garis di bab berikutnya.

Wadah Tanggap Anda juga dapat menggunakan .container-sm|md|lg|xl

Kelas wadah untuk menentukan kapan wadah harus merespon. max-width akan berubah di berbagai ukuran layar/visi:

Kelas Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

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>
<div class="container-xxl">.container-xxl</div>

Coba Sendiri