in English

Thlep

Grid column, navigation, component leh thil dang tam tak layout, alignment, leh sizing te chu rang takin enkawl la, responsive flexbox utilities full suite hmangin enkawl rawh. Implementation complex zawk atan chuan custom CSS a ngai mai thei.

He page ah hian

Flex behavior te chu enable rawh

Utilities hmangin flexbox displaycontainer siam la, direct children elements chu flex item-ah chantir rawh. Flex container leh thil awmte chu flex property dang nen siam danglam belh theih a ni bawk.

Flexbox container ka ni a!

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

Inline flexbox container ka ni a!

<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Responsive variation pawh a awm a, .d-flexleh .d-inline-flex.

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex

Kawh lam

Flex thil awmte chu direction utilities awmna flex container-ah dah la. A tam zawkah chuan hetah hian horizontal class hi i paih thei a, browser default chu row. Mahse, he value hi chiang taka set a ngaihna dinhmun (responsive layout ang chi) i tawk thei.

.flex-rowHorizontal direction set nan hmang la (browser default), a nih loh leh .flex-row-reversea sir lehlamah horizontal direction tan nan hmang ang che.

Flex item 1 a awm

Flex item 2 a awm

Flex item 3 a awm

Flex item 1 a awm

Flex item 2 a awm

Flex item 3 a awm

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

.flex-columnVertical direction set nan hmang la , a nih loh leh .flex-column-reversea sir lehlamah vertical direction tan nan hmang bawk ang che.

Flex item 1 a awm

Flex item 2 a awm

Flex item 3 a awm

Flex item 1 a awm

Flex item 2 a awm

Flex item 3 a awm

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Responsive variation pawh a awm a, flex-direction.

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Content dik tak siam rawh

Flexbox container-a utilities hmangin justify-contentmain axis-a flex thil awmte alignment thlak danglam rawh (the x-axis to start, y-axis if flex-direction: column). start(browser default), end, center, between, around, emaw atang hian thlang rawh evenly.

Flex item a ni

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

Responsive variation pawh a awm a, justify-content.

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Item te chu align rawh

Flexbox container-a utilities hmangin align-itemscross axis-a flex thil awmte alignment thlak rawh (the y-axis to start, x-axis if flex-direction: column). start, end, center, baseline, emaw stretch(browser default) atang hian thlang rawh .

Flex item a ni

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Responsive variation pawh a awm a, align-items.

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

Align self a ni

Flexbox item-a utilities hmangin align-selfcross axis-a an alignment pakhat zel thlak danglam (the y-axis to start, x-axis if flex-direction: column). align-items: start, end, center, baseline, emaw stretch(browser default) ang chiah option atang hian thlang rawh .

Flex item a ni

Aligned flex item a awm

Flex item a ni

Aligned flex item a awm

Flex item a ni

Aligned flex item a awm

Flex item a ni

Aligned flex item a awm

Flex item a ni

Aligned flex item a awm

Flex item a ni

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Responsive variation pawh a awm a, align-self.

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Thun

Sibling element series-a class hmangin .flex-fillan content tlukpui zau zawng (a nih loh leh an content-in an border-box a pelh loh chuan zau zawng inang)-ah force la, horizontal space awm zawng zawng chu la vek rawh.

Flex item ah hian content tam tak a awm

Flex item a ni

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Responsive variation pawh a awm a, flex-fill.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill

A thang lian a, a tlahniam bawk

Utilities hmangin .flex-grow-*flex item pakhat a lo thanglian theihna chu toggle la, space awmsa luah khat rawh. A hnuaia entirnan hian .flex-grow-1elements te hian space awm zawng zawng a hmang vek a, chutih rualin flex item dang pahnih te chu an mamawhna hmun a phalsak bawk.

Flex item a ni

Flex item pathumna a ni

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

Utilities hmangin .flex-shrink-*flex item pakhat a shrink theihna chu a tul chuan toggle rawh. A hnuaia entirnan hian, flex item pahnihna with .flex-shrink-1chu a chhunga thu awmte chu line thara wrap turin a nawr a, “shrinking” hmangin a hmaa flex item .w-100with

Flex item a ni

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

Responsive variation pawh a awm a, flex-growleh flex-shrink.

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1

Auto margin a awm bawk

Flexbox hian flex alignment leh auto margins i mix hian thil mak tak tak a ti thei a. A hnuaia tarlan te hi auto margin hmanga flex item control dan entirnan pathum a ni: default (no auto margin), item pahnih dinglamah .me-autonawr ( ), leh thil pahnih veilamah nawr ( .ms-auto).

Flex item a ni

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="me-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>

Align-items te nen

Flex item pakhat chu container chunglam emaw hnuai lamah emaw vertical-in align-items, flex-direction: column, leh margin-top: autoor margin-bottom: auto.

Flex item a ni

<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Tuam

Flex thilte chu flex container-a an wrap dan thlak rawh. No wrapping at all (browser default) hmangin thlang la .flex-nowrap, wrapping with .flex-wrap, emaw reverse wrapping with .flex-wrap-reverse.

Flex item a ni

<div class="d-flex flex-nowrap">
  ...
</div>

Flex item a ni

<div class="d-flex flex-wrap">
  ...
</div>

Flex item a ni

<div class="d-flex flex-wrap-reverse">
  ...
</div>

Responsive variation pawh a awm a, flex-wrap.

.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Thupek

Utility tlemte hmangin flex item bikte visual order chu thlak rawh . orderItem siam hmasak ber emaw, a hnuhnung ber emaw siamna tur option chauh kan pe a, chubakah DOM order hman theihna tur reset pawh kan pe bawk. order0 atanga 5 thlenga integer value eng pawh a lak angin , value dang mamawh tur custom CSS add tur a ni.

Flex item hmasa ber

Flex item pahnihna

Flex item pathumna a ni

<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Responsive variation pawh a awm a, order.

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5

Tin, responsive .order-firstleh .order-lastclass te pawh a awm bawk a, chu chuan element pakhat chu leh , orderhmangin a thlak danglam thin.order: -1order: 6

.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last

Content chu align rawh

Flexbox container-a utilities hmangin cross axis-a align-contentflex thilte chu align khawm rawh. start(browser default), end, center, between, around, emaw atang hian thlang rawh stretch. Heng utilities te hi entir nan hian flex-wrap: wrapflex items kan enforce a, kan tipung bawk.

Lu a ti sang a! He property hian flex item row pakhatah nghawng a nei lo.

Flex item a ni

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Flex item a ni

<div class="d-flex align-content-end flex-wrap">...</div>

Flex item a ni

<div class="d-flex align-content-center flex-wrap">...</div>

Flex item a ni

<div class="d-flex align-content-between flex-wrap">...</div>

Flex item a ni

<div class="d-flex align-content-around flex-wrap">...</div>

Flex item a ni

<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsive variation pawh a awm a, align-content.

.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-around
.align-content-xxl-stretch

Media thil tum a ni

Bootstrap 4 atanga media object component replicate tur i zawng em? Hun rei lo te chhungin flex utility tlemte hmangin siam thar leh la, chu chuan a hma aia flexibility leh customization tam zawk a pe thei bawk.

Hei hi media component atanga content thenkhat a ni. Hei hi eng content pawh hmangin i thlak thei a, a tul angin i siamrem thei bawk.

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Tin, image bula content chu vertical-a center i duh thu sawi bawk ang che:

Hei hi media component atanga content thenkhat a ni. Hei hi eng content pawh hmangin i thlak thei a, a tul angin i siamrem thei bawk.

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Sass a ni

Utilities API hmanga thil tih a ni

Flexbox utilities hi kan utilities API ah hian scss/_utilities.scss. Utilities API hman dan zir rawh.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),