3

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

Search results
Headphone 1

Gadget

$300 $400

Sale

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New