Bootstrap 4 Utilities

Flex

Flex Features

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Enable flex behaviors

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

I'm a flexbox container!
<div class="d-flex p-2 bg-infos">I'm a flexbox container!</div>
I'm an inline flexbox container!
<div class="d-inline-flex p-2 bg-info">I'm an inline flexbox container!</div>

Responsive variations also exist for .d-flex and .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

Screen Only (Hide on print only) Hide up to large on screen, but always show on print

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

Direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row bg-dark mb-3">
 <div class="p-2 bg-primary text-white">Flex item 1</div> 
 <div class="p-2 bg-primary text-white">Flex item 2</div>
 <div class="p-2 bg-primary text-white">Flex item 3</div> 
 </div>
<div class="d-flex flex-row-reverse bg-dark ">
 <div class="p-2 bg-primary text-white">Flex item 1</div> 
 <div class="p-2 bg-primary text-white">Flex item 2</div>
 <div class="p-2 bg-primary text-white">Flex item 3</div> 
 </div>

Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-column bg-primary mb-3">
 <div class="p-2 bg-primary text-white">Flex item 1</div> 
 <div class="p-2 bg-success text-white">Flex item 2</div>
 <div class="p-2 bg-success text-white">Flex item 3</div> 
 </div>
<div class="d-flex flex-column-reverse bg-primary">
 <div class="p-2 bg-danger text-white">Flex item 1</div> 
 <div class="p-2 bg-success text-white">Flex item 2</div>
 <div class="p-2 bg-primary text-white">Flex item 3</div> 
 </div>

Responsive variations also exist for 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

Screen Only (Hide on print only) Hide up to large on screen, but always show on print

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>