Konteenaroota

Qabduulee ijaarsa bu'uuraa Bootstrap kanneen qabiyyee kee meeshaa ykn iddoo ilaalchaa kenname keessatti of keessaa qaban, pad, fi qindeessaniidha.

Fuula kana irratti

Akkaataa itti hojjetan

Qabduulee Bootstrap keessatti qaama qindaa'ina bu'uuraa yoo ta'an yeroo sirna tarjaa durtii keenya fayyadamnu barbaachisoodha . Qabduu qabiyyee isaan keessa jiru qabachuuf, paad gochuuf, fi (yeroo tokko tokko) giddugaleessa gochuuf fayyadamu. Qabduulee man'ee ta'uu kan danda'an yoo ta'u, qindaa'inoota baay'een qabduu man'ee hin barbaadan .

Bootstrap qabduu adda addaa sadii waliin dhufa:

.containermax-width, kan tokkoon tokkoon qabxii cabsuu deebii kennuu irratti a saagu
.container-fluid, kunis width: 100%bakka cabbii hundatti ta’a
.container-{breakpoint}, kunis width: 100%hanga qabxii cabbii ifteessameetti

Gabatee armaan gadii akkaataa tokkoon tokkoon qabduu's max-widthjalqabaa wajjin wal bira qabamee .containerfi .container-fluidtokkoon tokkoon qabxii cabsuu qaxxaamuree agarsiisa.

Gochaan isaan ilaalii fakkeenya Giriidii keenya keessatti wal bira qabi ilaali .

	Dabalata xiqqaa <576px	Xiqqaa ≥576px	Giddugaleessa ≥768px	Guddaa ≥992px	X-Guddaa ≥1200px	XX-Guddaa ≥1400px
`.container`	100% ta'a.	540px ta'a	720px ta'a	960px ta'a	1140px ta'a	1320px ta'a
`.container-sm`	100% ta'a.	540px ta'a	720px ta'a	960px ta'a	1140px ta'a	1320px ta'a
`.container-md`	100% ta'a.	100% ta'a.	720px ta'a	960px ta'a	1140px ta'a	1320px ta'a
`.container-lg`	100% ta'a.	100% ta'a.	100% ta'a.	960px ta'a	1140px ta'a	1320px ta'a
`.container-xl`	100% ta'a.	100% ta'a.	100% ta'a.	100% ta'a.	1140px ta'a	1320px ta'a
`.container-xxl`	100% ta'a.	100% ta'a.	100% ta'a.	100% ta'a.	100% ta'a.	1320px ta'a
`.container-fluid`	100% ta'a.	100% ta'a.	100% ta'a.	100% ta'a.	100% ta'a.	100% ta'a.

Qabduu durtii

Gitni keenya durtii .containerdeebii kan kennu, qabduu bal'ina dhaabbataa dha, jechuunis max-widthjijjiiramoota isaa tokkoon tokkoo qabxii cabbii irratti.

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

Konteenaroota deebii kennan

Qabduu deebii kennaan hanga qabxiin cabbii ifteessame ga'utti gita bal'ina 100% ifteessuu si dandeessisu, sana booda max-widthtokkoon tokkoo tuqaawwan ciccituu ol'aanaaf s hojiirra oolchina. Fakkeenyaaf, hanga tuqaa ciccituu .container-smga'utti jalqabuuf 100% bal'ina qaba sm, bakka inni md, lg, xl, fi 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>

Meeshaalee dhangala’oo qaban

.container-fluidQabduu bal'ina guutuuf fayyadami, bal'ina guutuu bal'ina mul'ataa bal'isuu .

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

Sass jedhama

Akkuma armaan olitti agarsiifame, Bootstrap tartiiba gita qabduu durtii ibsame uuma, kunis qindaa'inoota barbaaddu ijaaruuf si gargaara. Gitoota qabduu durtii ibsaman kana kaartaa Sass (kan keessatti argame _variables.scss) kan humna isaaniif kennu fooyyessuudhaan dhuunfachuu dandeessa:

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

Sass dhuunfachuu malees, Sass mixin keenyaan qabduu mataa keessanii uumuu dandeessu.

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

Odeeffannoo dabalataa fi fakkeenyota akkaataa kaartaa fi jijjiiramoota Sass keenya fooyyessuuf, maaloo kutaa Sass galmee Giriidi ilaali .