Flexbox utilities in bootstrap with examples

The Flexible Box Layout Module in bootstrap is used for designing the flexible and responsive layout structure. It is used in Bootstrap 4.

• The d-flex class is used to create a simple flexbox container 

Syntax:

<div class="d-flex p-2"></div>

• The d-inline-flex class is used to create an inline flexbox container 

Syntax:

<div class="d-inline-flex p-2"></div>

• .d-flex and .d-inline-flex can be used for all breakpoints(sm, md, lg, xl) like .d-sm-flex, .d-sm-inline-flex, etc. 

Syntax:

<div class="d-sm-flex p-2"></div>
<div class="d-sm-inline-flex p-2"></div>

Example 1:

Output:

👁 Image
Example 2:

Output:

👁 Image

Horizontal And Vertical Direction of Flexbox: The direction of flex items can be positioned in a flex container.

• To set a horizontal direction (the browser default) use .flex-row. 

Syntax:

<div class="d-flex flex-row"></div>

• To start the horizontal direction from the opposite side use .flex-row-reverse. 

Syntax:

<div class="d-flex flex-row-reverse"></div>

• To set a vertical direction use .flex-column. 

Syntax:

<div class="d-flex flex-column"></div>

• To start the vertical direction from the opposite side use .flex-column-reverse. 

Syntax:

<div class="d-flex flex-column-reverse"></div>

• Flex-direction can be used for all breakpoints(sm, md, lg, xl) like .flex-sm-row, flex-sm-row-reverse, etc. 

Syntax:

<div class="d-flex flex-column-reverse"></div>
<div class="d-flex flex-column"></div>

Example 3:

Output:

👁 Image
Example 4:

Output:

👁 Image

Justify Content: In order to change the alignment of flex items, one can use the .justify-content-* classes. 
* can be any one of them start (default), end, center, between, or around. 

Similarly, justify-content can be used for all breakpoints(sm, md, lg, xl) like .justify-content-sm-start, .justify-content-sm-end, etc.

Syntax:

<div class="d-flex justify-content-start"></div>

Example 5:

Output:

👁 Image

Filling of Widths of flex items:

Flex items can be forced into equal widths by using the .flex-fill class. 
.flex-fill can be used for all breakpoints(sm, md, lg, xl) like .flex-sm-fill, etc.

Syntax:

<div class="p-2 flex-fill"></div>

Example 6:

Output:

👁 Image

Order:

.order classes are used for changing the visualization order of a flex item. 
Ordering is done on a number basis from 0 to 12. 
0 has highest priority. 
.order can be used for all breakpoints(sm, md, lg, xl) like .order-sm-0 to .order-sm-12, etc.

Syntax:

<div class="p-2 order-4"></div>

Example 7:

Output:

👁 Image

Automation of margins:

• .mr-auto used to push items to the right.
• .ml-auto used to push items to the left

Syntax:

<div class="p-2 mr-auto"></div>

Example 8:

Output:

👁 Image

Wrapping of flex item:

.flex-nowrap (default), .flex-wrap and .flex-wrap-reverse are used for wrapping the flex items in a flex container. 
.flex-wrap can be used for all breakpoints(sm, md, lg, xl) like .flex-sm-nowrap, .flex-sm-wrap, etc.

Syntax:

<div class="p-2 border"></div>

Example 9:

Output:

👁 Image

Align Content:

Basically, it is used for the vertical alignment of flex items. 
align-content can be implemented in various ways. 

• .align-content-start 
• .align-content-end 
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• Similarly for sm, md, lg, xl

Syntax:

<div class="p-2 align-content-start"></div>

Example 10:

Output:

👁 Image

Align items:

Use the align-items class to change the alignment of flex items on the cross axis. 
align-items can be implemented in various ways.

• .align-items-start 
• .align-items-end 
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• Similarly for sm, md, lg, xl

Syntax:

<div class="p-2 align-items-start"></div>

Example 11:

Output:

👁 Image

Align self:

align-self class can be used to change the alignment on the cross axis. 
align-self can be implemented in various ways.

• .align-self-start 
• .align-self-end 
• .align-self-center
• .align-self-around
• .align-self-stretch
• .align-self-sm-start
• Similarly for sm, md, lg, xl

Syntax:

<div class="p-2 align-self-center"></div>

Example 12:

Output:

👁 Image

Growing and Shrinking of available space:

.flex-grow-* is used to grow flex items to fill available space. 
.flex-shrink-* is used to shrink the flex item. 
flex-grow and flex-shrink can be implemented as follows. 

• .flex-{grow|shrink}-0
• .flex-{grow|shrink}-1

Similarly for sm, md, lg, xl

Syntax:

<div class="p-2 flex grow-1"></div>

Example 13:

Output:

👁 Image

Supported Browser:

• Google Chrome
• Firefox
• Opera
• Safari