Wadhah

Carane padha bisa

Wadah minangka unsur tata letak paling dhasar ing Bootstrap lan dibutuhake nalika nggunakake sistem kothak standar . Wadah digunakake kanggo ngemot, pad, lan (kadhangkala) pusat konten ing njero. Nalika kontaner bisa disarangke, umume tata letak ora mbutuhake wadhah bersarang.

Bootstrap dilengkapi telung wadhah sing beda:

• .container, sing nyetel max-widthing saben breakpoint responsif
• .container-fluid, width: 100%kang ing kabeh breakpoints
• .container-{breakpoint}, sing width: 100%nganti breakpoint sing ditemtokake

Tabel ing ngisor iki nggambarake carane saben wadhah max-widthmbandhingake karo asline .containerlan .container-fluiding saben breakpoint.

Deleng ing tumindak lan mbandhingake ing conto Grid kita .

Wadhah standar

Kelas standar kita .containerminangka wadhah sing responsif, ambane tetep, tegese owah- max-widthowahan ing saben breakpoint.

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

Wadhah responsif

Wadhah responsif ngidini sampeyan nemtokake kelas sing ambane 100% nganti tekan breakpoint sing ditemtokake, banjur ditrapake max-widths kanggo saben breakpoints sing luwih dhuwur. Contone, .container-smiku 100% amba kanggo miwiti nganti smbreakpoint tekan, ngendi iku bakal ukuran munggah karo md, lg, xl, lan 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

Gunakake .container-fluidkanggo wadhah ambane lengkap, ngecakup kabeh jembar viewport.

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

Sass

Kaya sing dituduhake ing ndhuwur, Bootstrap ngasilake seri kelas wadhah sing wis ditemtokake kanggo mbantu sampeyan nggawe tata letak sing dikarepake. Sampeyan bisa ngatur kelas wadhah sing wis ditemtokake iki kanthi ngowahi peta Sass (ditemokake ing _variables.scss) sing menehi daya:

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

Saliyane ngatur Sass, sampeyan uga bisa nggawe wadhah dhewe nganggo mixin Sass.

// 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();
}

Kanggo informasi luwih lengkap lan conto babagan carane ngowahi peta lan variabel Sass, waca bagean Sass saka dokumentasi Grid .