Gitter System

Benotzt eist mächtegt mobil-éischt Flexbox Gitter fir Layouten vun alle Formen a Gréissten ze bauen dank engem zwielef Kolonnsystem, fënnef Standardreaktiounsfäegkeeten, Sass Variablen a Mixins, an Dosende vu virdefinéierte Klassen.

Wéi et funktionnéiert

De Gittersystem vum Bootstrap benotzt eng Serie vu Container, Zeilen a Spalten fir Inhalt ze Layout an ausriichten. Et ass mat Flexbox gebaut an ass voll reaktiounsfäeger. Drënner ass e Beispill an en detailléierte Bléck op wéi d'Gitter zesumme kënnt.

Nei oder net vertraut mat Flexbox? Liest dësen CSS Tricks Flexbox Guide fir Hannergrond, Terminologie, Richtlinnen a Code Snippets.

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

Dat uewe genannte Beispill erstellt dräi gläich-Breet Sailen op kleng, mëttel, grouss an extra grouss Apparater mat eise virdefinéierte Gitterklassen. Dës Kolonnen sinn op der Säit mat dem Elterendeel zentréiert .container.

Ofbriechen et, hei ass wéi et funktionnéiert:

• Container bidden e Mëttel fir den Inhalt vun Ärem Site ze zentréieren an horizontal ze paddelen. Benotzt .containerfir eng reaktiounsfäeger Pixel Breet oder .container-fluidfir width: 100%iwwer all Viewport an Apparat Gréissten.
• Reihen sinn Wrappers fir Sailen. All Kolonn huet horizontal padding(genannt Rennen) fir de Raum tëscht hinnen ze kontrolléieren. Dëst paddinggëtt dann op d'Reihen mat negativen Margen entgéintgesat. Op dës Manéier ass all Inhalt an Äre Kolonnen visuell op der lénker Säit ausgeriicht.
• An engem Gitter Layout muss Inhalt a Spalten plazéiert ginn an nëmme Kolonnen kënnen direkt Kanner vu Reihen sinn.
• Dank Flexbox, Gitterkolonnen ouni spezifizéierter widthLayout automatesch als gläiche Breet Sailen. Zum Beispill, véier Instanzen vun .col-smwäert all automatesch 25% breet aus dem klenge breakpoint an erop. Kuckt d' Auto-Layout Kolonnen Sektioun fir méi Beispiller.
• Kolonn Klassen uginn d'Zuel vun de Kolonnen Dir gären aus der méiglech ze benotzen 12 pro Zeil. Also, wann Dir dräi gläich-Breet Sailen iwwer wëllt, kënnt Dir benotzen .col-4.
• Kolonn widths sinn a Prozentsaz gesat, sou datt se ëmmer flësseg a grouss sinn relativ zu hirem Elterendeel.
• Kolonnen hunn horizontal paddingd'Rennen tëscht eenzelne Sailen ze schafen, Ee, Dir kënnt de marginvun Zeile ewechzehuelen an paddingaus Saile mat .no-guttersop der .row.
• Fir de Gitter reaktiounsfäeger ze maachen, ginn et fënnef Gitterbriechpunkten, ee fir all reaktiounsfäeg Breakpunkt : all Breakpunkten (extra kleng), kleng, mëttel, grouss an extra grouss.
• Gitterbriechpunkte baséieren op Mindestbreet Medienufroen, dat heescht datt se op deen eenzege Breakpunkt an all déi uewendriwwer gëllen (zB .col-sm-4gëlt fir kleng, mëttel, grouss an extra grouss Apparater, awer net den éischte xsBreakpunkt).
• Dir kënnt virdefinéiert Gitterklassen benotzen (wéi .col-4) oder Sass Mixins fir méi semantesch Markup.

Sidd bewosst vun den Aschränkungen a Bugs ronderëm Flexbox , wéi d' Onméiglechkeet e puer HTML Elementer als Flex Container ze benotzen .

Gitter Optiounen

Während Bootstrap ems oder rems benotzt fir déi meescht Gréissten ze definéieren, pxgi s fir Gitterbriechpunkten a Containerbreet benotzt. Dëst ass well d'Viewport Breet a Pixel ass an net mat der Schrëftgréisst ännert .

Kuckt wéi Aspekter vum Bootstrap Gittersystem iwwer verschidde Geräter mat engem prakteschen Dësch funktionnéieren.

Auto-Layout Kolonnen

Benotzt breakpoint-spezifesch Kolonnklassen fir einfach Kolonngréisst ouni explizit nummeréiert Klass wéi .col-sm-6.

Gläich Breet

Zum Beispill, hei sinn zwee Gitter Layouten déi op all Apparat an Viewport gëllen, vun xsbis xl. Füügt all Unzuel vun Eenheetsmanner Klassen fir all Breakpoint, deen Dir braucht, an all Kolonn wäert déiselwecht Breet sinn.

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

Gläich Breet Multi-Linn

Erstellt gläich-Breet Spalten déi méi Zeilen spanen andeems Dir e setzt .w-100wou Dir wëllt datt d'Spalten op eng nei Linn briechen. Maacht d'Pausen reaktiounsfäeger andeems Dir .w-100mat e puer reaktiounsfäeger Display-Utilities vermëscht .

Et war e Safari Flexbox Käfer deen verhënnert huet datt dëst ouni explizit flex-basisoder border. Et gi Léisunge fir eeler Browser Versiounen, awer si sollten net néideg sinn wann Är Zilbrowser net an d'Buggy Versioune falen.

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

Astellung vun enger Kolonnbreet

Auto-Layout fir Flexbox Gitter Säulen heescht och datt Dir d'Breet vun enger Kolonn astelle kënnt an d'Geschwëster Kolonnen automatesch ëm d'Gréisst änneren. Dir kënnt virdefinéiert Gitterklassen benotzen (wéi hei ënnendrënner), Gittermixen oder Inline Breeten. Bedenkt datt déi aner Spalten d'Gréisst änneren egal wéi d'Breet vun der Mëttelkolonne.

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

Variabel Breet Inhalt

Benotzt col-{breakpoint}-autoKlassen fir Spalten ze gréisseren baséiert op der natierlecher Breet vun hirem Inhalt.

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

Reaktiounsfäeger Klassen

Bootstrap's Gitter enthält fënnef Stäck vu virdefinéierte Klassen fir komplex reaktiounsfäeg Layouten ze bauen. Personnaliséiert d'Gréisst vun Äre Sailen op extra kleng, kleng, mëttel, grouss oder extra grouss Apparater wéi Dir et passt.

All Breakpoints

Fir Gitter déi d'selwecht sinn aus dem klengste vun Apparater bis zum gréissten, benotzt d' .cola .col-*Klassen. Gitt eng nummeréiert Klass un wann Dir eng speziell grouss Kolonn braucht; soss, fillen gratis ze halen .col.

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

Op horizontal gestapelt

Mat engem eenzege Set vu .col-sm-*Klassen kënnt Dir e Basisrastersystem erstellen deen gestapelt ufänkt a gëtt horizontal um klenge Breakpunkt ( sm).

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

Mix a Match

Wëllt Dir net datt Är Spalten einfach an e puer Gitterstufen stackelen? Benotzt eng Kombinatioun vu verschiddene Klassen fir all Tier wéi néideg. Kuckt d'Beispill hei ënnen fir eng besser Iddi wéi et alles funktionnéiert.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>

Gutters

Gutters kënnen reaktiounsfäeger ugepasst ginn duerch breakpoint-spezifesch Padding an negativ Margin Utility Klassen. Fir d'Rennen an enger bestëmmter Zeil z'änneren, paréiert en negativ Margin Utility op der .rowa passende Padding Utilities op der .cols. Den .containeroder .container-fluidElterendeel muss vläicht och ugepasst ginn fir ongewollten Iwwerschwemmung ze vermeiden, andeems en erëm passende Padding-Utility benotzt.

Hei ass e Beispill fir d'Bootstrap Gitter an der grousser ( lg) Breakpoint an uewen ze personaliséieren. Mir hunn d' .colPadding erhéicht mat .px-lg-5, entgéintgesat datt mat .mx-lg-n5op den Elterendeel an dann de Wrapper mat .rowugepasst ..container.px-lg-5

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

Rei Kolonnen

Benotzt déi reaktiounsfäeger .row-cols-*Klassen fir séier d'Zuel vun de Spalten ze setzen déi Ären Inhalt an de Layout am Beschten maachen. Wärend normal .col-*Klassen op déi eenzel Kolonnen gëllen (zB, .col-md-4), sinn d'Zeilkolonnen Klassen op den Elterendeel .rowals Ofkiirzung gesat.

Benotzt dës Zeilkolonnen Klassen fir séier Basis Gitter Layouten ze kreéieren oder Är Kaarte Layouten ze kontrolléieren.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Dir kënnt och de Begleet Sass Mixin benotzen, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Ausriichtung

Benotzt Flexbox Ausrichtung Utilities fir vertikal an horizontal Spalten ze alignéieren. Internet Explorer 10-11 ënnerstëtzt keng vertikal Ausrichtung vu Flexartikelen wann de Flexbehälter e min-heightwéi hei ënnendrënner huet. Gesinn Flexbugs #3 fir méi Detailer.

Vertikal Ausrichtung

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

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

Horizontal Ausrichtung

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

Keng Rennen

D'Rennen tëscht de Sailen an eise virdefinéierte Gitterklassen kënne mat ewechgeholl ginn .no-gutters. Dëst läscht déi negativ margins aus .rowan der horizontal paddingaus all direkt Kanner Kolonnen.

Hei ass de Quellcode fir dës Stiler ze kreéieren. Bedenkt datt d'Kolonniwwerschreiden nëmmen op déi éischt Kannerkolonnen scoped sinn an iwwer Attributselektor gezielt sinn . Och wann dëst e méi spezifesche Selektor generéiert, kann d'Spaltpolsterung nach ëmmer weider personaliséiert ginn mat Abstands-Utilities .

Braucht Dir e Rand-zu-Rand Design? Drop den Elterendeel .containeroder .container-fluid.

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

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

An der Praxis, hei ass wéi et ausgesäit. Notéiert Dir kënnt weider dëst mat all anere virdefinéierte Gitterklassen benotzen (inklusiv Kolonnbreeten, reaktiounsfäeger Niveauen, Neibestellungen a méi).

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

Kolonne Wrap

Wa méi wéi 12 Kolonnen an enger eenzeger Zeil plazéiert sinn, wäert all Grupp vun extra Kolonnen als eng Eenheet op eng nei Linn wéckelen.

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

Kolonn brécht

Spalten op eng nei Zeil an Flexbox briechen erfuerdert e klengen Hack: füügt en Element mat width: 100%wou Dir Är Kolonnen op eng nei Linn wéckele wëllt. Normalerweis gëtt dëst mat multiple .rows erreecht, awer net all Implementéierungsmethod kann dëst berechnen.

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

Dir kënnt dës Paus och bei spezifesche Breakpunkte mat eise reaktiounsfäeger Display-Utilities uwenden .

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

Neibestellung

Klassen bestellen

Benotzt .order-Klassen fir d' visuell Uerdnung vun Ärem Inhalt ze kontrolléieren. Dës Klassen si reaktiounsfäeger, sou kënnt Dir den orderduerch Breakpoint astellen (zB. .order-1.order-md-2). Ëmfaasst Ënnerstëtzung fir 1duerch 12iwwer all fënnef Gitterniveauen.

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Et ginn och reaktiounsfäeger .order-firsta .order-lastKlassen déi ordervun engem Element änneren duerch Applikatioun order: -1an order: 13( order: $columns + 1), respektiv. Dës Klassen kënnen och mat den nummeréierte .order-*Klassen gemëscht ginn wéi néideg.

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

Offset Sailen

Dir kënnt Gitterkolonnen op zwou Weeër kompenséieren: eis reaktiounsfäeg .offset-Gitterklassen an eis Margin Utilities . Gitterklassen si Gréisst fir Spalten ze passen, während Marge méi nëtzlech si fir séier Layouten wou d'Breet vum Offset variabel ass.

Offset Klassen

Beweegt Spalten no riets mat .offset-md-*Klassen. Dës Klassen erhéijen de lénksen Rand vun enger Kolonn duerch *Kolonnen. Zum Beispill, .offset-md-4bewegt .col-md-4iwwer véier Sailen.

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

Zousätzlech zu der Kolonnklärung bei reaktiounsfäeger Breakpunkten, musst Dir eventuell Offsets zrécksetzen. Kuckt dëst an Aktioun am Gitter Beispill .

<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

Mat der Beweegung op Flexbox am v4, kënnt Dir Margin Utilities benotze wéi .mr-autoGeschwësterkolonnen vuneneen fortzwéngen.

<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

Fir Ären Inhalt mat dem Standardgitter ze nestéieren, füügt eng nei .rowa Set vu .col-sm-*Spalten an enger existéierender .col-sm-*Kolonn. Nested Zeile sollen eng Rei vu Kolonnen enthalen déi bis zu 12 oder manner addéieren (et ass net erfuerderlech datt Dir all 12 verfügbare Kolonnen benotzt).

<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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

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

<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

Beweegt iwwer d'Kolonn selwer, kënnt Dir och d'Zuel vun de Gitterstufen personaliséieren. Wann Dir just véier Gittertiere wëllt, da géift Dir den $grid-breakpointsan $container-max-widthsop sou eppes aktualiséieren:

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

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

Wann Dir Ännerungen un de Sass Variablen oder Kaarten maacht, musst Dir Är Ännerungen späicheren an nei kompiléieren. Maachen dëst wäert e fuschneie Set vu virdefinéierte Gitterklassen fir Kolonnbreeten, Offsets a Bestellung erausginn. Responsabel Visibilitéit Utilities ginn och aktualiséiert fir déi personaliséiert Breakpoints ze benotzen. Gitt sécher datt Dir Gitterwäerter an px(net rem, em, oder %) setzt.