Column hrang hrang a awm

Kan flexbox grid system hmang hian alignment, ordering, leh offsetting atana option tlemte hmanga column siam danglam dan zir rawh. Plus, non-grid elements widths enkawl nan column class hman dan tur en bawk ang che.

He page ah hian

Lu a ti sang a! I grid column siam danglam leh siam danglam dan tur i dive hmain Grid page kha chhiar hmasa phawt ang che.

An hnathawh dan

Column te hi grid-a flexbox architecture hmanga siam a ni. Flexbox tih awmzia chu column hrang hrang thlak leh row level a column group siam danglam theihna option kan nei tihna a ni . Column-te a lo ṭhan dan, a tlahniam dan, a nih loh leh a danglam dan tur i thlang ṭhin.
Grid layout siam hian content zawng zawng chu column-ah a kal vek a. Bootstrap grid hierarchy hi container atanga row khat atanga column dangah i content thlengin a kal zel a. Hun tlemteah chuan content leh column i inzawm khawm thei a, mahse tum loh taka thil thleng a awm thei tih hre reng ang che.
Bootstrap hian layout chak tak, chhanna pe thei tak siam theihna tur class ruat lawk a keng tel a. Grid tier tinah breakpoint paruk leh column dozen vel awmin , i duh ang layout siam turin class dozen tam tak kan siam tawh a ni. Hei hi Sass hmangin i duh chuan disable theih a ni.

Alignment tih a ni

Column vertical leh horizontal-a align turin flexbox alignment utilities hmang ang che.

Vertical alignment a awm bawk

Column pathum zinga pakhat

html tih a ni

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

html tih a ni

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

html tih a ni

<div class="container text-center">
  <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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </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 tharah contiguous unit pakhat angin a wrapped a.

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

html tih a ni

<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

html tih a ni

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

html tih a ni

<div class="container text-center">
  <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 paruk zawng zawngah through support a huam vek.order.order-1.order-md-215

DOM-ah chuan order a awm lo

DOM-ah pahnihna, order lian zawk nen

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

html tih a ni

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      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 a awm a, orderchu chuan element pakhat chu a thlak danglam a order: -1, order: 6, a hnuaia mi ang hian. .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

html tih a ni

<div class="container text-center">
  <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 chu 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 laiin margin te hi 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

html tih a ni

<div class="container text-center">
  <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 bawk. 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

html tih a ni

<div class="container text-center">
  <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 .me-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 .ms-a hman tur a ni

.col-md-3 .ms-md-auto hmanga tih a ni

.col-auto tih hi a ni

.col-auto hmanga tih a ni

html tih a ni

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Standalone column class hrang hrang a awm bawk

Class te hi .col-*a pawnah hmangin .rowelement pakhat chu a zau zawng bik pek theih a ni bawk. Column class te chu row pakhata non-direct child anga hman a nih apiangin padding te chu a paih chhuak thin.

.col-3: a zau zawng 25% .

.col-sm-9: sm breakpoint aia 75% a zau zawng

html tih a ni

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Class te hi utilities te nen hmangin responsive floated image siam theih a ni. .clearfixText tawi zawk a nih chuan float clear turin content chu wrapper-ah wrap ngei ang che .

Placeholder thuziak paragraph pakhat. Hetah hian clearfix class hman dan entir nan kan hmang a ni. Hetah hian column-te leh floated image nena an inzawmna lantir nan thumal awmze nei lo tlemte kan dah belh a ni.

I hmuh angin paragraph-te chuan floated image chu mawi takin an khuh a. Tunah chuan hetiang hian engtin nge a lan ang tih han ngaihtuah teh, hetah hian thupui tak tak thenkhat nen, he boring placeholder text chauh ni lovin, a kal zel a, mahse a takah chuan thu chiang tak a thlen lo at. Hmun a luah mai a, chhiar tak tak tur a ni lo.

Tin, chuti chung pawh chuan, hetah hian i awm a, he placeholder text chhiarnaah hian i la beih reng a, hriatna dang engemaw zat beiseiin, a nih loh leh thup easter egg thup engemaw zat i beisei a ni. Fiamthu a ni mai thei. Vanduaithlak takin hetah hian chutiang chu a awm lo.

html tih a ni

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>