Grid system hmanga siam a ni

Kan mobile-first flexbox grid chak tak hmangin column sawm leh pahnih system, default responsive tier panga, Sass variable leh mixin, leh class ruat lawk tam tak avangin layout chi hrang hrang leh a lian zawng zawng siam rawh.

A hnathawh dan

Bootstrap-a grid system hian container, row leh column hrang hrang hmangin content layout leh align a siam a. Flexbox hmanga siam a ni a, fully responsive a ni. A hnuaia tarlan te hi entirnan leh grid inzawmkhawm dan thuk taka thlir a ni.

Flexbox hmang thar emaw, hriat loh emaw? Background, terminology, guidelines, leh code snippets te hriat duh chuan he CSS Tricks flexbox guide hi chhiar la .

Column pathum zinga pakhat

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

A chunga entirnan hian kan predefined grid class hmangin device tenau, lian, lian leh extra large-ah column zau zawng inang pathum a siam a. Chu column te chu page chhungah a laiah a awm a parent nen .container.

Breaking it down, hetiang hian a hnathawh dan chu hetiang hi a ni:

Container hian i site chhunga thil awmte chu center leh horizontal-a pad theihna tur kawng a pe a. .containerResponsive pixel width .container-fluidatan emaw width: 100%viewport leh device size zawng zawngah emaw hmang ang che .
Rows hi column hrang hranga wrapper a ni. Column tin hian paddingan inkar space control nan horizontal (gutter an tih) an nei vek a. Chu paddingchu negative margin nei row-ah te counteract a ni. Chutiang chuan i column-a thu awm zawng zawng chu veilam sir hnuaiah hmuh theihin a inrem vek a ni.
Grid layout-ah chuan content chu column chhungah dah tur a ni a, column chauh chu rows fate nghal thei a ni.
Flexbox vang hian grid column tarlan loh widthchuan automatic in equal width column angin a layout ang. Entirnan, instance pali of .col-smwill each automatically chu breakpoint te tak te atanga a chung lam atanga 25% zau a ni ang. Entirna dang chu auto-layout columns section -ah en rawh .
Column class-ah hian row khata column 12 awm thei zinga i hman duh zat a tarlang a. Chuvangin, equal-width column pathum across i duh chuan .col-4.
Column widths te hi percentage-a dah a nih avangin an parent element nena khaikhin chuan fluid leh size an nei reng a ni.
paddingColumn te hian column hrang hrang inkar gutter siam turin horizontal an nei a , mahse, marginfrom rows leh paddingfrom columns te chu .no-gutterson the hmangin i paih thei a .rowni.
Grid responsive tur chuan grid breakpoint panga a awm a, responsive breakpoint tin atan pakhat : breakpoint zawng zawng (extra small), small, medium, large, leh extra large.
Grid breakpoints hi minimum width media query-a innghat a ni a, chu breakpoint pakhat leh a chunga awm zawng zawngah hman a ni tihna a ni (eg, .col-sm-4device tenau, lian, lian, leh extra large-ah hman a ni a, mahse xsbreakpoint hmasa ber erawh a ni lo).
Semantic markup tam zawk neih nan predefined grid class (like .col-4) emaw Sass mixins emaw i hmang thei bawk.

Flexbox chhehvela limitation leh bugs awmte hre reng ang che , HTML element thenkhat flex container atana hman theih loh ang chi te hi hre reng ang che .

Grid duhthlan tur a awm

Bootstrap hian size tam zawk definite nan ems emaw s emaw a hmang laiin, s hi grid breakpoint leh container width atan hman a ni thung. Hei hi a chhan chu viewport width hi pixels a nih avangin font size nen a danglam lo .rempx

Bootstrap grid system aspect hrang hrangte chu device tam takah handy table hmanga hnathawh dan en rawh.

	A tlem zawk <576px	A te ≥576px a ni	A laihawl ≥768px a ni	A lian ≥992px a ni	A lian zawk ≥1200px
Max container zau zawng	A awm lo (auto) .	540px a ni	720px a ni	960px a ni	1140px a ni
Class hmasa ber a ni	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of column hrang hrang a awm	12 a ni
Gutter zau zawng	30px (column sir lehlamah 15px)
Nestable a ni	Awle
Column order tur a ni	Awle

Auto-layout theih a ni

.col-sm-6. _

A zau zawng inang vek

Entirnan, hetah hian grid layout pahnih kan rawn tarlang a, chu chu device leh viewport tinah hman theih a ni a, from xsto xl. Breakpoint i mamawh apiang atan unit-less class engzat pawh dah la, column tin chu a zau zawng inang vek a ni ang.

1 of 2 a ni

2 of 2 a ni

1 of 3 a ni

2 of 3 a ni

3 of 3 a ni

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

Multi-line zau zawng inang vek

.w-100Column te chu line thara break i duhna hmunah a dahin line tam tak huam thei column zau zawng inang siam rawh . Break te chu responsive display utility.w-100 thenkhat nen mix in responsive takin siam rawh .

Safari flexbox bug a awm a, hei hian explicit flex-basisor border. Browser version hlui zawkte tan workaround a awm a, mahse i target browser te buggy version-a an tlak loh chuan a tul tur a ni lo.

col

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

Column pakhat zau zawng setting

Flexbox grid column-te tana auto-layout hian column pakhat zau zawng i set thei a, a chhehvela unaupa column-te chu automatic-in a resize theih tihna a ni bawk. Grid class ruat lawk (a hnuaia tarlan ang hian), grid mixin, emaw inline width emaw i hmang thei bawk. Column dangte chu center column zau zawng engzat pawhin an size an thlak ang tih hre reng ang che.

1 of 3 a ni

2 of 3 (a zau zawk) .

3 of 3 a ni

1 of 3 a ni

2 of 3 (a zau zawk) .

3 of 3 a ni

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

A zau zawng danglam thei content

Class hmangin col-{breakpoint}-autocolumn te chu an content awm dan natural width atanga size tur a ni.

1 of 3 a ni

A zau zawng danglam thei content

3 of 3 a ni

1 of 3 a ni

A zau zawng danglam thei content

3 of 3 a ni

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

Responsive class hrang hrang neih a ni

Bootstrap-a grid-ah hian complex responsive layout siamna tur predefined class tier panga a awm a. I column te size chu extra small, small, medium, large, or extra large device ah i duh angin customize rawh.

Breakpoint zawng zawng

Device te ber atanga a lian ber thlenga grid inang tak tak tan chuan .coland .col-*class te hi hmang ang che. Column lian bik i mamawh hunah number nei class tarlang rawh; chutiang a nih loh chuan, zalen takin .col.

col

col-8 a ni

col-4 a ni

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

Stack a ni a, horizontal a ni

Class set khat hmangin .col-sm-*basic grid system i siam thei a, chu chu stacked atanga tan a ni a, breakpoint te tak te ( sm) ah chuan horizontal a lo ni ta a ni.

col-sm-8 a ni

col-sm-4 a ni

col-sm a ni

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

I column te chu grid tier thenkhatah stack mai mai turin i duh lo em ni? A tul angin tier tin tan class hrang hrang inzawmkhawm hmang ang che. A hnathawh zawng zawng hriatna tha zawk hriat duh chuan a hnuaia entîrna hi en rawh.

.col-md-8 tih a ni

.col-6 .col-md-4 tih a ni

.col-6 a ni

<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 te a awm

Gutters te hi breakpoint-specific padding leh negative margin utility class hmangin responsive takin an siamrem thei a ni. Row pek tawha gutters thlak tur chuan negative margin utility chu pair la, s .row-ah chuan padding utilities inmil rawh. .colThe .containeror .container-fluidparent pawh duh loh overflow awm loh nan siamthat a ngai mai thei a, again matching padding utility hmangin.

lgHetah hian Bootstrap grid chu breakpoint lian tak ( ) leh a chung lama customize dan entirnan kan rawn tarlang e . .colKan padding chu kan tipung a , chu chu nu leh pa chungah .px-lg-5kan do a, chutah chuan wrapper chu kan siamrem leh a ..mx-lg-n5.row.container.px-lg-5

Custom column padding a awm bawk

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

Row column hrang hrang te

Responsive .row-cols-*class te hmangin i content leh layout render tha ber tur column zat chu rang takin set rawh. Normal .col-*class chu column hrang hrangah hman a nih laiin (eg, .col-md-4), row column class te chu parent-ah .rowshortcut angin set a ni.

Heng row columns class te hi rang taka basic grid layout siam nan emaw, i card layout control nan emaw hmang ang che.

Ban

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

Ban

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

Ban

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

Ban

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

Ban

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

A kaihhnawih Sass mixin pawh i hmang thei bawk ang, 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);
  }
}

Alignment tih a ni

Column vertical leh horizontal-a align turin flexbox alignment utilities hmang ang che. Internet Explorer 10-11 hian a hnuaia tarlan ang hian flex container-in a neih laiin flex items vertical alignment a support lo . min-height A chipchiar zawkna chu Flexbugs #3 ah hian en rawh.

Vertical alignment a awm bawk

Column pathum zinga pakhat

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

Column pathum zinga pakhat

<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 a awm theih nan

Column pahnih zinga pakhat

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

Gutters a awm lo

Kan grid class ruat lawk tawha column inkar gutter awmte chu .no-gutters. Hei hian immediate children column zawng zawng atanga negative margins .rowleh horizontal te chu a paih chhuak vek a ni.padding

Heng style te siamna tur source code chu hetiang hi a ni. Column override te hi naupang column hmasa berte chauh scope a ni a, attribute selector hmanga target a ni tih hre reng ang che . Hei hian selector bik zawk a siam laiin, column padding chu spacing utilities hmangin a la siam danglam belh thei tho a ni .

Edge-to-edge design i mamawh em? Nu leh pa .containeremaw .container-fluid.

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

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

Practice-ah chuan hetiang hian a lang. Hriat tur chu hei hi predefined grid class dang zawng zawng (column zau zawng, responsive tiers, reorder, leh a dangte pawh tel) nen i hmang chhunzawm thei ang.

.col-sm-6 .col-md-8 tih a ni

.col-6 .col-md-4 tih a ni

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

Column a hrual a

Row khat chhunga column 12 aia tam dah a nih chuan, extra column group tinte chu unit pakhat angin line tharah an khuh ang.

.col-9 a ni

.col-4
9 + 4 = 13 > 12 a nih avangin he 4-column-wide div hi line thar pakhatah contiguous unit pakhat angin a wrapped a.

.col-6
A hnuaia column te chu line thar zawh hian an chhunzawm zel a.

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

Flexbox-a line thara column break tur chuan hack tlemte a ngai a: width: 100%i column te chu line thara wrap duhna hmun apiangah element dah la. A tlangpuiin hei hi multiple .rows hmanga tihhlawhtlin a ni a, mahse implementation method zawng zawng hian hei hi a account thei lo.

.col-6 .col-sm-3 tih a ni

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

He break hi breakpoint bik ah kan responsive display utilities hmangin i hmang thei bawk ang .

.col-6 .col-sm-4 tih a ni

<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 tih a ni

Class hrang hrang order theih a ni

I thu awmte hmuh theiha awm dan.order- tur control nan class hmang ang che . Heng class te hi responsive an nih avangin by breakpoint (eg, ) te chu i set thei a ni. Grid tier panga zawng zawngah through support a huam vek.order.order-1.order-md-2112

DOM-ah chuan order a awm lo

DOM-ah pahnihna, order lian zawk nen

DOM-ah pathumna a ni a, order chu 1 a ni

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

Responsive .order-firstleh .order-lastclass te pawh orderelement pakhat apply order: -1leh order: 13( order: $columns + 1) hmanga thlak danglam thei class te pawh a awm bawk. .order-*Heng class te hi a tul angin number pek class te nen pawh intermix theih a ni bawk .

DOM-ah pakhatna, order hnuhnung ber

DOM-ah pahnihna, unordered

DOM-ah pathumna, order hmasa ber

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

Column offset dan tur

Grid column te hi kawng hnih in offset theih a ni: kan responsive .offset-grid class te leh kan margin utilities te . Grid class te hi column nena inmil turin size an siam a, margin erawh chu offset zau zawng danglam theihna hmuna quick layout atan a tangkai zawk thung.

Offset class hrang hrang a awm

.offset-md-*Class hmangin column te chu dinglamah sawn rawh . Heng class te hian column pakhat veilam margin chu column hrang hrangin an tipung a *. Entirnan, column pali chungah .offset-md-4a kal thei..col-md-4

.col-md-4 tih a ni

.col-md-4 .offset-md-4 tih a ni

.col-md-3 .offset-md-3 tih a ni

.col-md-6 .offset-md-3 tih a ni

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

Responsive breakpoint-a column clearing bakah hian offsets reset a ngai mai thei. Hei hi grid entirnan action-ah en rawh .

.col-sm-5 .col-md-6 tih a ni

A rilru a buai em em a, a rilru a hah em em bawk a. .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6. A rilru a hah lutuk chuan a rilru a buai em em a

A rilru a buai em em a, a rilru a hah em em bawk a. .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 te pawh a awm

v4-a flexbox-a kal hian margin utilities i hmang thei ang .mr-auto, chu chu sibling column-te chu pakhat leh pakhat inkara inhlat tir ang chi hi a ni.

.col-md-4 tih a ni

.col-md-4 .ml-a hman tur a ni

.col-md-3 .ml-md-auto hmanga siam a ni

.col-auto .mr-auto tih a ni

.col-auto hmanga tih a ni

<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 tih a ni

Default grid hmanga i content nest tur chuan column awmsa chhungah column thar .rowleh set dah la . Nested row-ah hian column set 12 emaw a aia tlem emaw add tur a awm tur a ni (column awm 12 awm zawng zawng hman vek a ngai lo)..col-sm-*.col-sm-*

Level 1: .col-sm-9 ah hian a awm a

Level 2: .col-8 .col-sm-6 ah hian a awm a

Level 2: .col-4 .col-sm-6 ah hian a awm a

<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 mixin te a awm

Bootstrap-a source Sass files i hman hian Sass variable leh mixins hmangin custom, semantic, leh responsive page layout siam theihna option i nei a ni. Kan predefined grid class te hian heng variable leh mixin ang chiah te hi hmangin fast responsive layouts atan ready-to-use class suite pum pui an pe thin.

Variables te pawh a awm

Variables leh maps hian column awm zat, gutter zau zawng, leh floating column tanna tur media query point a tichiang a ni. Hengte hi a chunga kan document tawh predefined grid class te siam nan kan hmang a, chubakah a hnuaia custom mixins tarlan te tan pawh kan hmang bawk.

$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 te a awm

Mixins te hi grid variable te nen inzawmin grid column hrang hrang tan semantic CSS siam nan hman a ni.

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

Entirna hman dan

Variable te chu i custom value ah i siam danglam thei a, a nih loh leh mixins te chu an default value nen i hmang mai thei bawk. Hetah hian default settings hmanga two-column layout siam dan tur entirnan kan rawn tarlang e, a inkarah gap awmin.

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

Thupui ber

Secondary thupui

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

Grid chu a customize a

Kan built-in grid Sass variable leh maps hmang hian grid class ruahman lawk te chu a pumin kan customize theih a ni. Tier awm zat, media query dimension leh container zau zawng te thlak rawh—chutah recompile leh rawh.

Column leh gutter te a awm bawk

Grid column awm zat hi Sass variable hmangin siam danglam theih a ni. $grid-columnschu column pakhat zel zau zawng (za zela 10-a chhut) siam nan hman a ni a $grid-gutter-width, column gutter-te tan zau zawng a set thung.

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

Grid tiers te a awm

Column ngei pawh kal pelin grid tier awm zat pawh i duh angin i siam thei bawk. Grid tier pali chauh i duh chuan $grid-breakpointsand $container-max-widthschu hetiang hian i update ang:

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

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

Sass variable emaw maps emaw i tihdanglam dawnin i tihdanglam chu i save a ngai ang a, i recompile a ngai ang. Chutianga tih chuan column width, offset, leh ordering atan predefined grid class set thar tak a output ang. Responsive visibility utilities te pawh custom breakpoints te hman theih turin update a ni bawk ang. Grid value te chu px(not rem, em, or %) ah set ngei ngei tur a ni.