Wadah

Bagaimana mereka bekerja?

Wadah adalah elemen tata letak paling dasar di Bootstrap dan diperlukan saat menggunakan sistem grid default kami . Wadah digunakan untuk menampung, melapisi, dan (terkadang) memusatkan konten di dalamnya. Meskipun container dapat disarangkan, sebagian besar tata letak tidak memerlukan container bersarang.

Bootstrap hadir dengan tiga wadah berbeda:

• .container, yang menetapkan a max-widthpada setiap breakpoint responsif
• .container-fluid, yang width: 100%sama sekali breakpoints
• .container-{breakpoint}, yaitu width: 100%sampai breakpoint yang ditentukan

Tabel di bawah mengilustrasikan max-widthperbandingan setiap penampung dengan aslinya .containerdan .container-fluiddi setiap titik henti sementara.

Lihat mereka beraksi dan bandingkan dalam contoh Grid kami .

Wadah bawaan

Kelas default kami .containeradalah wadah responsif dengan lebar tetap, yang berarti max-widthperubahannya di setiap breakpoint.

<div class="container">
  <!-- Content here -->
</div>

Wadah responsif

Wadah responsif memungkinkan Anda menentukan kelas dengan lebar 100% hingga titik henti sementara yang ditentukan tercapai, setelah itu kami menerapkan max-widths untuk setiap titik henti sementara yang lebih tinggi. Misalnya, .container-smlebar 100% untuk memulai hingga smbreakpoint tercapai, di mana ia akan ditingkatkan dengan md, lg, xl, dan xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Wadah cairan

Gunakan .container-fluiduntuk wadah lebar penuh, yang mencakup seluruh lebar viewport.

<div class="container-fluid">
  ...
</div>

Kelancangan

Seperti yang ditunjukkan di atas, Bootstrap menghasilkan serangkaian kelas kontainer yang telah ditentukan sebelumnya untuk membantu Anda membangun tata letak yang Anda inginkan. Anda dapat menyesuaikan kelas kontainer yang telah ditentukan ini dengan memodifikasi peta Sass (ditemukan di _variables.scss) yang mendukungnya:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Selain menyesuaikan Sass, Anda juga dapat membuat wadah sendiri dengan mixin Sass kami.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Untuk informasi lebih lanjut dan contoh tentang cara memodifikasi peta dan variabel Sass kami, silakan merujuk ke bagian Sass dari dokumentasi Grid .