Source

Grid sistem

Yuz wi pawaful mobayl-fɔs fleksbɔks grid fɔ bil layout dɛn we gɛt ɔl di shep ɛn saiz dɛn tank to wan twɛlv kɔlɔm sistem, fayv difɔlt rispɔnsiv taya dɛn, Sass vɛriɔbul ɛn miksin dɛn, ɛn dɔzin klas dɛn we dɛn dɔn prɛdifayn.

Aw i de wok

Bootstrap in grid sistem de yuz wan siriɔs kɔntena, row, ɛn kɔlɔm fɔ layout ɛn alaynɛt kɔntinyu. I bil wit flexbox ɛn i ful-ɔp fɔ ansa. Dis dɔŋ ya na ɛgzampul ɛn wan dip luk pan aw di grid kam togɛda.

Nyu to ɔ nɔ sabi flexbox? Rid dis CSS Tricks flexbox gayd fɔ bakgrɔn, tɛminɔlɔji, gaydlayn, ɛn kɔd snipɛt dɛn.

Wan pan tri kɔlɔm dɛ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>

Di ɛgzampul we de ɔp de mek tri ikwal-wid kɔlɔm dɛn pan smɔl, midul, big, ɛn ɛkstra big divays dɛn we de yuz wi grid klas dɛn we wi dɔn disayd fɔ du. Dɛn kɔlɔm dɛn de de na di sɛnt na di pej wit di mama ɔ papa .container.

We yu brok am, na so i de wok:

Kɔntena dɛn de gi wan we fɔ sɛnt ɛn ɔrizɔntal pad di tin dɛn we de insay yu sayt. Yuz .containerfɔ wan piksɛl wid we de ansa ɔ .container-fluidfɔ width: 100%akɔdin to ɔl di viupɔt ɛn divays saiz dɛn.
Row na wrap fɔ kɔlɔm dɛn. Ɛni kɔlɔm gɛt ɔrizɔntal padding(we dɛn kɔl gɔta) fɔ kɔntrol di spes bitwin dɛn. Dɔn paddingdɛn kin kɔntrakt dis pan di row dɛn we gɛt nɛgitiv margin. Dis we ya, ɔl di tin dɛn we de insay yu kɔlɔm dɛn de alaynɛd wit yu si dɔŋ di lɛft say.
Insay grid layout, kɔntinyu fɔ de insay kɔlɔm ɛn na kɔlɔm nɔmɔ kin bi pikin dɛn fɔ row dɛn wantɛm wantɛm.
Tɛnki fɔ flexbox, grid kɔlɔm dɛn we nɔ gɛt wan spɛsifikɛd widthgo ɔtomɛtik layout as ikwal wit kɔlɔm dɛn. Fɔ ɛgzampul, 4 instans dɛn fɔ .col-smgo ɔtomɛtik wan 25% waid frɔm di smɔl brekpɔynt ɛn ɔp. Si di ɔto-layout kɔlɔm dɛn sɛkshɔn fɔ no mɔ ɛgzampul dɛn.
Kɔlɔm klas dɛn de sho di nɔmba fɔ di kɔlɔm dɛn we yu go want fɔ yuz pan di 12 we pɔsibul fɔ ɛni row. So, if yu want tri kɔlɔm dɛn we gɛt ikwal-wid akɔdin, yu kin yuz .col-4.
Kɔlɔm widths dɛn sɛt insay pasɛnt, so dɛn kin ɔltɛm fluid ɛn saiz rilitiv to dɛn mama ɛn papa ɛlimɛnt.
Kɔlɔm dɛn gɛt ɔrizɔntal paddingfɔ mek di gɔta dɛn bitwin wan wan kɔlɔm dɛn, bɔt, yu kin pul di marginfrɔm rɔw dɛn ɛn paddingfrɔm kɔlɔm dɛn wit .no-gutterspan di .row.
Fɔ mek di grid ansa, fayv grid brek pɔynt dɛn de, wan fɔ ɛni brek pɔynt we de ansa : ɔl di brek pɔynt dɛn (ɛkstra smɔl), smɔl, midul, big, ɛn ɛkstra big.
Grid brekpoint dɛn de bays pan minim width midia kwɛstyɔn dɛn, we min se dɛn de aplay to da wan brekpoint de ɛn ɔl di wan dɛn we de ɔp am (ɛgz., i .col-sm-4de aplay to smɔl, midul, big, ɛn ɛkstra big divays dɛn, bɔt nɔto di fɔs xsbrekpoint).
Yu kin yuz prɛdifayn grid klas dɛn (lɛk .col-4) ɔ Sass miksin fɔ mɔ sɛmantik mak.

Yu fɔ no di limiteshɔn ɛn di bɔg dɛn we de rawnd flexbox , lɛk di we aw yu nɔ ebul fɔ yuz sɔm HTML ɛlimɛnt dɛn as fleks kɔntena dɛn .

Grid opshɔn dɛn

Wail Bootstrap de yuz ems ɔ rems fɔ difayn mɔs saiz dɛn, pxdɛn de yuz s fɔ grid brekpɔynt ɛn kɔntena wit. Dis na bikɔs di viupɔt wit na piksɛl ɛn i nɔ de chenj wit di font saiz .

Si aw aspek dɛn fɔ di Bootstrap grid sistem de wok akɔdin to bɔku divays dɛn wit wan tebul we izi fɔ yuz.

	Ekstra smɔl <576px	Smɔl ≥576px	Midul ≥768px fɔ di wan dɛn we de	Big big ≥992px	Ekstra big ≥1200px
Maks kontena wit	Nɔn nɔ de (ɔto) .	540px na di pikchɔ	720px na di pikchɔ	960px na di pikchɔ	1140px na di pikchɔ
Klas prɛfiks	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# fɔ kɔlɔm dɛn	12 we de tɔk bɔt
Width fɔ di gɔta	30px (15px na ɛni say na wan kɔlɔm)
Nestable fɔ di wan dɛn we de	Yɛs
Kɔlɔm fɔ ɔda	Yɛs

Ɔto-layout kɔlɔm dɛn

Yutilayz brekpoint-spɛsifi k kɔlɔm klas fɔ izi kɔlɔm saiz we nɔ gɛt ɛksplisit nɔmba klas lɛk .col-sm-6.

Ikual-width

Fɔ ɛgzampul, na tu grid layout dɛn ya we de aplay to ɛvri divays ɛn viupɔt, frɔm xsto xl. Ad ɛni nɔmba fɔ klas dɛn we nɔ gɛt yunit fɔ ɛni brekpɔynt we yu nid ɛn ɛvri kɔlɔm go bi di sem wit.

1 pan di 2

2 pan di 2

1 pan di 3

2 pan di 3

3 pan di 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>

Yu kin brok kɔlɔm dɛn we gɛt ikwal-wid insay bɔku layn dɛn, bɔt wan Safari fleksbɔks bɔg bin de we bin mek dis nɔ wok we nɔ gɛt wan flex-basisɔ border. Wokarawnd de fɔ ol brawza vɛshɔn dɛn, bɔt dɛn nɔ fɔ nid fɔ de if yu de ɔp-to-dɛt.

Pila

<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>

Set wan kɔlɔm wit

Oto-layout fɔ flexbox grid kɔlɔm dɛn min bak se yu kin sɛt di wit fɔ wan kɔlɔm ɛn mek di brɔda ɛn sista dɛn kɔlɔm dɛn ɔtomɛtik chenj di sayz rawnd am. Yu kin yuz grid klas dɛn we dɛn dɔn difayn bifo tɛm (as dɛn sho dɔŋ ya), grid miksin dɛn, ɔ inlayn wit dɛn. Notis se di ɔda kɔlɔm dɛn go chenj di sayz ilɛksɛf di sɛnta kɔlɔm big.

1 pan di 3

2 pan 3 (we big pas am) .

3 pan di 3

1 pan di 3

2 pan 3 (we big pas am) .

3 pan di 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>

Variable width kɔntinyu fɔ de

Yuz col-{breakpoint}-autoklas fɔ saiz kɔlɔm dɛn bay di natura width fɔ dɛn kɔntinyu.

1 pan di 3

Variable width kɔntinyu fɔ de

3 pan di 3

1 pan di 3

Variable width kɔntinyu fɔ de

3 pan di 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>

Ikual-wid we gɛt bɔku bɔku rɔw dɛn

Krio kɔlɔm dɛn we gɛt ikwal-wid we de span bɔku bɔku row dɛn bay we yu put wan .w-100usay yu want di kɔlɔm dɛn fɔ brok to nyu layn. Mek di brek dɛn rispɔnsiv bay we yu miks di .w-100wit sɔm rispɔnsiv displei yutiliti dɛn .

kol

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

Klas dɛn we de ansa

Bootstrap in grid inklud fayv taya dɛn fɔ prɛdifayn klas dɛn fɔ bil kɔmpleks rispɔnsiv layout dɛn. Kastamayz di sayz fɔ yu kɔlɔm dɛn pan ɛkstra smɔl, smɔl, midul, big, ɔ ɛkstra big divays dɛn aw yu si se i fayn.

Ɔl di brekpoint dɛn

Fɔ grid dɛn we na di sem frɔm di smɔl wan dɛn to di big wan dɛn, yuz di .colɛn .col-*klas dɛn. Spɛsifikɛt wan klas we gɛt nɔmba we yu nid wan kɔlɔm we gɛt patikyula sayz; if nɔto dat, fil fri fɔ stik to .col.

kol

kol-8

kol-4

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

Stak to ɔrizɔntal

Yuz wan singl set fɔ .col-sm-*klas, yu kin mek wan besik grid sistem we de stat aut stak ɛn bi ɔrizɔntal na di smɔl brekpoint ( sm).

kol-sm-8

kol-sm-4

kol-sm we dɛn kɔl

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

Miks ɛn mach

Yu nɔ want yu kɔlɔm dɛn fɔ jɔs stak insay sɔm grid taya dɛn? Yuz wan kɔmbaynshɔn fɔ difrɛn klas dɛn fɔ ɛni taya as nid de. Si di ɛgzampul we de dɔŋ fɔ no mɔ bɔt aw ɔltin de wok.

.kɔl-12 .kɔl-md-8

.kɔl-6 .kɔl-md-4

.kɔl-6

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

Gɔta dɛn

Gutters kin rispɔnsivli ajɔst bay brekpɔynt-spɛsifi k padding ɛn nɛgitiv margin yutiliti klas dɛn. Fɔ chenj di gɔta dɛn na wan givɛn row, pe wan nɛgitiv margin yutiliti na di .rowɛn maching padding yutiliti dɛn na di .cols. Di .containerɔ mama ɔ .container-fluidpapa kin nid fɔ ajɔst bak fɔ avɔyd ɔvaflɔ we yu nɔ want, yuz bak matching padding utility.

Na wan ɛgzampul fɔ kɔstɔmayz di Bootstrap grid na di big ( lg) brekpoint ɛn ɔp. Wi dɔn inkrisayz di .colpadding wit .px-lg-5, kɔntrakt dat wit .mx-lg-n5pan di mama ɛn papa .rowɛn afta dat wi ajɔst di .containerwrap wit .px-lg-5.

Kastom kɔlɔm padding

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Alignmɛnt fɔ di wan dɛn we de

Yuz fleksbɔks alaynɛshɔn yutiliti fɔ alaynɛt kɔlɔm dɛn vertikal ɛn ɔrizɔntal wan.

Vɛtikal alaynɛshɔn

Wan pan tri kɔlɔm dɛ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>

Wan pan tri kɔlɔm dɛ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>

Ɔrizɔntal alaynɛshɔn

Wan pan tu kɔlɔm dɛ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>

Nɔ gɛt gɔta dɛn

Di gɔta dɛn bitwin kɔlɔm dɛn na wi grid klas dɛn we wi dɔn disayd fɔ du, yu kin pul am wit .no-gutters. Dis de pul di negatif margins frכm .rowεn di כrizכnal paddingfrכm כl di imεdiεt pikin kכlכm dεm.

Na di sɔs kɔd fɔ mek dɛn stayl ya. Notis se di kɔlɔm ɔvarayd dɛn de skɔp to di fɔs pikin kɔlɔm dɛn nɔmɔ ɛn dɛn de tɔch dɛn bay atribyut sɛlɛktɔ . Pan ɔl we dis de mek wan mɔ spɛshal sɛlɛktɔ, dɛn kin stil kɔstɔmayz kɔlɔm pad mɔ wit spɛshal yutiliti dɛn .

Nid wan ed-to-ed dizayn? Drɔp di mama ɔ papa .containerɔ .container-fluid.

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

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

In praktis, na so i luk. Notis se yu kin kɔntinyu fɔ yuz dis wit ɔl di ɔda grid klas dɛn we dɛn dɔn pridifayn (inklud di kɔlɔm dɛn wit, di taya dɛn we de ansa, di ɔda tin dɛn we dɛn dɔn ɔda, ɛn ɔda tin dɛn).

.kol-12 .kol-sm-6 .kol-md-8

.kɔl-6 .kɔl-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>

Kɔlɔm fɔ rap

If dɛn put pas 12 kɔlɔm dɛn insay wan row, ɛni grup we gɛt ɛkstra kɔlɔm dɛn go, as wan yunit, rap pan nyu layn.

.kɔl-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

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

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

.col-6 .col-sm-3

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

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4

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

Reordering

Order classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

First, but unordered

Second, but last

Third, but first

<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>

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

First, but last

Second, but unordered

Third, but first

<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>

Offsetting columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

.col-md-4

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

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

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

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

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

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

Margin utilities

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

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

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9

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

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

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

Sass mixins

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

$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 are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

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

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

.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);
  }
}

Main content

Secondary content

<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>

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

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

Grid tiers

We yu de muf pas di kɔlɔm dɛnsɛf, yu kin kɔstɔmayt bak di nɔmba fɔ di grid taya dɛn. If yu bin want jɔs 4 grid taya, yu go ɔpdet di $grid-breakpointsɛn $container-max-widthsto sɔntin lɛk dis:

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

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

We yu de mek ɛni chenj to di Sass vɛriɔbul ɔ map dɛn, yu go nid fɔ kip yu chenj dɛn ɛn kɔmpilayt bak. If yu du dat, i go autput wan brand nyu sɛt fɔ pridifayn grid klas fɔ kɔlɔm wit, ɔfset, ɛn ɔda. Rispɔnsiv visibiliti yutiliti dɛn go ɔpdet bak fɔ yuz di kɔstɔm brekpɔynt dɛn. Mek shɔ se yu sɛt grid valyu dɛn na px(nɔto rem, em, ɔ %).