Source

Sistèm griyaj

Sèvi ak kadriyaj pwisan flexbox mobil premye nou an pou konstwi tout fòm ak tout gwosè gras a yon sistèm douz kolòn, senk nivo repons default, varyab Sass ak mixin, ak plizyè douzèn klas predefini.

Ki jan li fonksyone

Sistèm kadriyaj Bootstrap la sèvi ak yon seri de resipyan, ranje, ak kolòn pou layout ak aliman kontni. Li bati ak flexbox epi li konplètman reponn. Anba a se yon egzanp ak yon gade an pwofondè sou fason kadriyaj la vini ansanm.

Nouvo oswa pa abitye ak flexbox? Li gid sa a CSS Tricks flexbox pou jan nou koumanse, tèminoloji, direktiv, ak fragments kòd.

Youn nan twa kolòn

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Egzanp ki pi wo a kreye twa kolòn egal-lajè sou aparèy ti, mwayen, gwo ak gwo siplemantè lè l sèvi avèk klas griy predefini nou yo. Kolòn sa yo santre nan paj paran an .container.

Kraze li desann, men ki jan li fonksyone:

Kontenè yo bay yon mwayen pou santre ak orizontal pad sa ki nan sit ou a. Itilize .containerpou yon lajè pixel ki reponn oswa .container-fluidpou width: 100%tout gwosè vi ak aparèy.
Ranje yo se anbalaj pou kolòn. Chak kolòn gen orizontal padding(yo rele yon goutyè) pou kontwole espas ki genyen ant yo. Sa a paddingse Lè sa a, kontrekare sou ranje yo ak marges negatif. Nan fason sa a, tout kontni an nan kolòn ou yo vizyèlman aliyen sou bò gòch la.
Nan yon layout kadriyaj, kontni yo dwe mete nan kolòn epi sèlman kolòn yo ka pitit imedya nan ranje.
Mèsi a flexbox, kolòn kadriyaj san yon espesifye widthpral otomatikman layout kòm kolòn lajè egal. Pou egzanp, kat ka yo .col-smpral chak otomatikman gen 25% lajè soti nan ti breakpoint la ak moute. Gade seksyon kolòn oto-layout la pou plis egzanp.
Klas kolòn yo endike kantite kolòn ou ta renmen itilize nan 12 posib pou chak ranje. Se konsa, si ou vle twa kolòn egal-lajè atravè, ou ka itilize .col-4.
Kolòn widthyo mete nan pousantaj, kidonk yo toujou likid ak gwosè parapò ak eleman paran yo.
Kolòn yo gen orizontal paddingpou kreye goutyè yo ant kolòn endividyèl yo, sepandan, ou ka retire yo marginnan ranje ak paddingnan kolòn ak .no-gutterssou la .row.
Pou rann kadriyaj la reponn, gen senk pwen rupture kadriyaj, youn pou chak rupture ki reponn : tout pwen rupture (sipleman piti), ti, mwayen, gwo ak gwo siplemantè.
Pwen kadriyaj yo baze sou demann medya lajè minimòm, sa vle di yo aplike nan yon sèl breakpoint ak tout moun ki anwo yo (egzanp, .col-sm-4aplike nan ti, mwayen, gwo, ak siplemantè aparèy, men se pa premye pwen an xs).
Ou ka itilize klas griy predefini (tankou .col-4) oswa Sass mixins pou plis maketing semantik.

Ou dwe konsyan de limit ak ensèk ki genyen nan flexbox , tankou enkapasite pou itilize kèk eleman HTML kòm resipyan flex .

Opsyon griyaj

Pandan ke Bootstrap itilize ems oswa rems pou defini pifò gwosè, pxs yo itilize pou pwen kadriyaj ak lajè veso. Sa a se paske lajè vi a se nan piksèl epi li pa chanje ak gwosè font la .

Gade ki jan aspè nan sistèm kadriyaj Bootstrap la ap travay sou plizyè aparèy ak yon tab sou la men.

	Siplemantè piti <576px	Ti ≥576px	Mwayen ≥768px	Gwo ≥992px	Siplemantè gwo ≥1200px
Lajè veso maksimòm	Okenn (oto)	540 px	720 px	960 px	1140px
Prefiks klas la	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# nan kolòn	12
Lajè goutyè	30px (15px sou chak bò yon kolòn)
Nestable	Wi
Kòmann kolòn	Wi

Kolòn oto-layout

Sèvi ak klas kolòn espesifik pwen breakpoint pou gwosè kolòn fasil san yon klas nimewote klè tankou .col-sm-6.

Egal-lajè

Pou egzanp, isit la gen de layout kadriyaj ki aplike nan chak aparèy ak viewport, soti xsnan xl. Ajoute nenpòt kantite inite-mwens klas pou chak breakpoint ou bezwen ak chak kolòn yo pral menm lajè.

1 nan 2

2 nan 2

1 nan 3

2 nan 3

3 nan 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Kolòn egal-lajè yo ka kase nan plizyè liy, men te gen yon ensèk Safari flexbox ki anpeche sa a nan travay san yon eksplisit flex-basisoswa border. Gen solisyon pou vèsyon navigatè ki pi gran yo, men yo pa ta dwe nesesè si w ap ajou.

Kolòn

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Mete yon sèl lajè kolòn

Oto-layout pou kolòn kadriyaj flexbox vle di tou ou ka mete lajè yon kolòn epi gen kolòn frè ak sè yo otomatikman redimansyone alantou li. Ou ka itilize klas griy predefini (jan yo montre anba a), melanj griy, oswa lajè enline. Remake byen ke lòt kolòn yo pral redimansyone kèlkeswa lajè kolòn santral la.

1 nan 3

2 nan 3 (pi laj)

3 nan 3

1 nan 3

2 nan 3 (pi laj)

3 nan 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Kontni lajè varyab

Sèvi ak col-{breakpoint}-autoklas pou gwosè kolòn yo baze sou lajè natirèl kontni yo.

1 nan 3

Kontni lajè varyab

3 nan 3

1 nan 3

Kontni lajè varyab

3 nan 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Egal-lajè milti-ranje

Kreye kolòn egal-lajè ki span plizyè ranje lè w mete yon .w-100kote ou vle kolòn yo kraze nan yon nouvo liy. Fè repo yo reponn lè w melanje .w-100ak kèk itilite ekspozisyon ki reponn .

kol

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Klas ki reponn

Kadriyaj Bootstrap a gen ladan senk nivo klas predefini pou bati konsepsyon konplèks reponn. Pèsonalize gwosè kolòn ou yo sou aparèy siplemantè piti, ti, mwayen, gwo oswa siplemantè, sepandan ou wè anfòm.

Tout breakpoints

Pou kadriyaj ki se menm bagay la soti nan pi piti a nan aparèy nan pi gwo a, sèvi .colak .col-*klas yo ak. Espesifye yon klas nimewote lè ou bezwen yon kolòn ki gen gwosè patikilyèman; otreman, santi yo lib pou rete sou .col.

kol

kol-8

kol-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Anpile sou orizontal

Sèvi ak yon sèl seri .col-sm-*klas, ou ka kreye yon sistèm kadriyaj debaz ki kòmanse anpile epi ki vin orizontal nan ti pwen an ( sm).

kol-sm-8

kol-sm-4

kol-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Melanje ak matche ak

Ou pa vle kolòn ou yo tou senpleman pile nan kèk nivo kadriyaj? Sèvi ak yon konbinezon de diferan klas pou chak nivo jan sa nesesè. Gade egzanp ki anba a pou yon pi bon lide sou kijan li fonksyone.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Aliyman

Sèvi ak sèvis piblik aliyman flexbox pou aliman kolòn vètikal ak orizontal.

Aliyman vètikal

Youn nan twa kolòn

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Youn nan twa kolòn

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Aliyman orizontal

Youn nan de kolòn

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Pa gen goutyè

Goutyè ki genyen ant kolòn nan klas griy predefini nou yo ka retire ak .no-gutters. Sa a retire negatif marginyo nan .rowak orizontal la paddingnan tout kolòn timoun imedya.

Men kòd sous la pou kreye estil sa yo. Remake byen ke ranvwa kolòn yo se sèlman nan premye kolòn timoun yo epi yo vize atravè seleksyon atribi . Pandan ke sa a jenere yon seleksyon ki pi espesifik, padding kolòn yo ka toujou Customized ak sèvis piblik espas .

Bezwen yon konsepsyon kwen-a-bò? Lage paran an .containeroswa .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Nan pratik, men ki jan li sanble. Remake byen ou ka kontinye itilize sa a ak tout lòt klas griy predefini (ki gen ladan lajè kolòn, nivo ki reponn, rekòmande, ak plis ankò).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Anbalaj kolòn

Si plis pase 12 kolòn yo mete nan yon sèl ranje, chak gwoup kolòn siplemantè pral, kòm yon sèl inite, vlope sou yon nouvo liy.

.col-9

.col-4
Depi 9 + 4 = 13 > 12, div 4 kolòn lajè sa a vin vlope sou yon nouvo liy kòm yon sèl inite kontigu.

.col-6
Kolòn ki vin apre yo kontinye sou nouvo liy lan.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Kolòn kraze

Kraze kolòn nan yon nouvo liy nan flexbox mande pou yon ti Hack: ajoute yon eleman ak width: 100%tout kote ou vle vlope kolòn ou nan yon nouvo liy. Nòmalman sa a se akonpli ak plizyè .rows, men se pa tout metòd aplikasyon ka kont pou sa.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Ou ka aplike repo sa a tou nan pwen pause espesifik ak sèvis piblik ki reponn ak ekspozisyon nou yo .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Rekòmande

Lòd klas yo

Sèvi ak .order-klas pou kontwole lòd vizyèl kontni ou. Klas sa yo reponn, kidonk ou ka fikse orderpa pwen rupture (egzanp, .order-1.order-md-2). Gen ladan sipò pou 1atravè 12tout senk nivo kadriyaj.

Premyèman, men san lòd

Dezyèm, men dènye

Twazyèm, men premye

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Genyen tou responsive .order-firstak .order-lastklas ki chanje ordernan yon eleman lè yo aplike order: -1ak order: 13( order: $columns + 1), respektivman. Klas sa yo kapab tou melanje ak klas nimewote .order-*yo jan sa nesesè.

Premye, men dènye

Dezyèmman, men san lòd

Twazyèm, men premye

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Kolòn konpanse

Ou ka konpanse kolòn kadriyaj nan de fason: .offset-klas griy ki reponn ak sèvis piblik Marge nou yo . Klas kadriyaj yo gwosè pou matche ak kolòn pandan y ap maj yo pi itil pou layouts rapid kote lajè konpanse a varyab.

Klas konpanse

Deplase kolòn sou bò dwat yo lè l sèvi avèk .offset-md-*klas yo. Klas sa yo ogmante maj gòch nan yon kolòn pa *kolòn. Pou egzanp, .offset-md-4deplase .col-md-4sou kat kolòn.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Anplis netwayaj kolòn nan pwen rupture ki reponn, ou ka bezwen reset konpanse yo. Gade sa an aksyon nan egzanp kadriyaj la .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Marge sèvis piblik

Avèk mouvman flexbox nan v4, ou ka itilize sèvis piblik Marge tankou .mr-autofòse kolòn frè ak sè yo lwen youn ak lòt.

.col-md-4

.col-md-4 .ml-oto

.col-md-3 .ml-md-oto

.col-oto .mr-oto

.col-oto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Nidifikasyon

Pou fè nich kontni ou a ak kadriyaj default la, ajoute yon nouvo .rowak seri .col-sm-*kolòn nan yon .col-sm-*kolòn ki deja egziste. Ranje anbrike yo ta dwe gen ladan yon seri kolòn ki ajoute jiska 12 oswa mwens (li pa oblije itilize tout 12 kolòn ki disponib).

Nivo 1: .col-sm-9

Nivo 2: .col-8 .col-sm-6

Nivo 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Sass mixins

Lè w ap itilize dosye Sass sous Bootstrap yo, ou gen opsyon pou w sèvi ak varyab Sass ak mixin pou kreye fòm paj koutim, semantik ak reponn. Klas kadriyaj predefini nou yo itilize menm varyab ak mixin sa yo pou bay tout yon seri klas ki pare pou itilize pou kouman yo reponn rapid.

Varyab

Varyab ak kat detèmine kantite kolòn yo, lajè goutyè yo, ak pwen rechèch medya yo kote yo kòmanse kolòn k ap flote. Nou itilize sa yo pou jenere klas griy predefini dokimante pi wo a, osi byen ke pou mixin koutim ki nan lis anba a.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

Mixins

Mixins yo itilize ansanm ak varyab kadriyaj yo pou jenere CSS semantik pou kolòn kadriyaj endividyèl yo.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Egzanp itilizasyon

Ou ka modifye varyab yo nan pwòp valè koutim ou, oswa jis itilize mixin yo ak valè default yo. Men yon egzanp lè w sèvi ak anviwònman default yo pou kreye yon layout de kolòn ak yon espas ant.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Kontni prensipal la

Kontni segondè

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Pèrsonalizasyon kadriyaj la

Sèvi ak varyab ak kat Sass kadriyaj entegre nou an, li posib pou konplètman pèsonalize klas griy predefini yo. Chanje kantite nivo, dimansyon rechèch medya yo, ak lajè veso a—apresa rekonpile.

Kolòn ak goutyè

Kantite kolòn kadriyaj yo ka modifye atravè varyab Sass. $grid-columnsyo itilize pou jenere lajè yo (an pousan) nan chak kolòn endividyèl pandan y ap $grid-gutter-widthmete lajè a pou goutyè yo kolòn.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Nivo kadriyaj

Deplase pi lwen pase kolòn yo tèt yo, ou ka tou Customize kantite nivo kadriyaj la. Si ou te vle jis kat nivo kadriyaj, ou ta mete ajou $grid-breakpointsak $container-max-widthsnan yon bagay tankou sa a:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Lè w ap fè nenpòt chanjman nan varyab oswa kat Sass yo, w ap bezwen sove chanjman ou yo epi rekonpile. Lè w fè sa, sa pral pwodwi yon nouvo seri klas griy predefini pou lajè kolòn, konpanse, ak lòd. Yo pral mete ajou sèvis piblik vizibilite yo tou pou yo sèvi ak pwen koutim yo. Asire w ke ou mete valè kadriyaj nan px(pa rem, em, oswa %).