Flex

Bootstrap 4 fully utilizes CSS3 flexbox. About Flexbox, see A complete guide to Flexbox.

Notation summary

Each notation maps to a corresponding CSS property name/value/value. See Flexbox (W3C) or Flexbox (MDN Glossary) for detail.

Sets display property (⇒ Display utility)

.d(-sm|-md|-lg|-xl)?-(flex|inline-flex)

Sets flex-direction property

.flex(-sm|-md|-lg|-xl)?-(row|column)(-reverse)?

Sets justify-content property

.justify-content(-sm|-md|-lg|-xl)?-(start|end|center|between|around)

Sets align-items property

.align-items(-sm|-md|-lg|-xl)?-(start|end|center|baseline|stretch)

Sets align-self property

.align-self(-sm|-md|-lg|-xl)?-(start|end|center|baseline|stretch)

Sets flex property (to flex: 1 1 auto; )

.flex(-sm|-md|-lg|-xl)?-fill

Sets flex-(grow|shrink) property

.flex(-sm|-md|-lg|-xl)?-(grow|shrink)-(0|1)

Sets flex-wrap property

.flex(-sm|-md|-lg|-xl)?-(nowrap|wrap|wrap-reverse)

Sets order property

.order(-sm|-md|-lg|-xl)?-(0|1|2|3|4|5|6|7|8|9|10|11|12|first|last)

Sets align-content property

.align-content(-sm|-md|-lg|-xl)?-(start|end|center|between|around|stretch)

Auto margin

.m(l|t|r|b)?-auto

Horizontal/Vertical direction

.flex(-sm|-md|-lg|-xl)?-(row|column)(-reverse)?

Justify content

.justify-content(-sm|-md|-lg|-xl)?-(start|end|center|between|around)

Align items

.align-items(-sm|-md|-lg|-xl)?-(start|end|center|baseline|stretch)

In examples below, parent box heights are fixed to 5rem.

Align self

.align-self(-sm|-md|-lg|-xl)?-(start|end|center|baseline|stretch)

In examples below, parent box heights are fixed to 5rem.

Fill

.flex(-sm|-md|-lg|-xl)?-fill

Use .flex-fill to fill flex items into the parent. Each item's width (or height) is grown by its content width.

Example: .flex-fill to each flex item

Grow and Shrink

.flex(-sm|-md|-lg|-xl)?-(grow|shrink)-(0|1)

CSS flex-grow property is set to 0 as default (i.e. does not grow). You can use .flex-grow-1 (sets to flex-grow: 1 ) to fill available width (or height) to the specific item.

CSS flex-shrink property is set to 1 as default (i.e. shrinks with browser-default ratio if needed). You can use .flex-shrink-0 (sets to flex-shrink: 0 ) to set the specific item that does not shrink.

Auto margins

.m(l|t|r|b)?-auto

Default

.mr-auto to item 1

.ml-auto to item 3

Auto-margins + align-items

Example 1

• .flex-column.align-items-start + style="height:10rem" to parent box
• .mb-auto to item 1

Example 2

• .flex-column.align-items-end + style="height:10rem" to parent box
• .mt-auto to item 3

Wrapping

.flex(-sm|-md|-lg|-xl)?-(nowrap|wrap|wrap-reverse)

In examples blow, parent box width is fixed to 15rem with lightgray background.

.d-flex.flex-nowrap

.d-flex.flex-wrap

.d-flex.flex-wrap-reverse

Order

.order(-sm|-md|-lg|-xl)?-(0|1|2|3|4|5|6|7|8|9|10|11|12|first|last)

Example: DOM order is item-(1,2,3,4,5), .order-* is (4,2,5,1,3).

Align content

.align-content(-sm|-md|-lg|-xl)?-(start|end|center|between|around|stretch)

Combination examples with .flex-wrap .

Structure

• Parent div.flex-wrap
  • Class .align-content-(start|end|center|...)
  • Attribute style="width: 300px; height: 150px;" (fix width and height)
  • Inner children div (×8)

Float

Utility classes for floating an element to the left or right.

Classes

.float-(left|right|none)

Responsive classes

.float-(sm|md|lg|xl)-(left|right|none)

Example

.float-sm-left

.float-sm-right

.float-md-left

.float-md-right

.float-lg-left

.float-lg-right

.float-xl-left

.float-xl-right

Image replacement

Utility class for using a replacement image for text content (example setting as follows).

• h1.text.hide
  • Attribute background-image: url("../img/sample-logo.png");
  • Attribute width: 224px;
  • Attribute height: 48px;
  • Text Sample Logo

Example

Sample Logo