Bootstrap 4 Flex

Flex is a Bootstrap 4 component used to manage the layout, navigation bar, grid columns, sizing, alignment, and other components. The flexbox or flex utility is the replacement of float and positions, which is commonly used in Bootstrap 3. The flex utilities allow you to align and adjust the size of the element horizontally or vertically.

Flexbox – The flexbox is used to create a responsive layout easily without using the float or positioning. To create a flexbox, add class .d-flex to the parent element. This class converts the immediate child into the flex item.

Example

Output

Bootstrap 4 Flex

 You can also convert the inline elements into the flex container with the help of flex utility. To create the inline element into a flex container, add .d-inline-flex class to the parent element.

Example

Output

Bootstrap 4 Flex

Horizontal Direction – Bootstrap 4 allows you to set the direction of the flex item into the flex container by using direction utilities. The horizontal direction is the default direction. To display flex item horizontally or side by side, add .flex-row class along with the .d-flex class to the wrapper element.

Example

Output

Bootstrap 4 Flex

Vertical Direction – You can also display your content vertically. To display the content vertically add .flex-column class to the <div> element. Flex utilities also allow you to reverse the order of the vertically align content with the help of .flex-column-reverse class to the <div> element.

Example

Output

Bootstrap 4 Flex

Justify Content – The justify content is used to set the alignment of the flex item in the flex container. To change the alignment, add the .justify-content-* class to the <div> element.

Where, * = start, end, center, between, and around.

Example

Output

Bootstrap 4 Flex

Fill / Equal Widths – The fill or equal widths allows the flex items to acquire equal widths. Add the .flex-fill class to the child element to create the flex items of equal width.

Example

Output

Bootstrap 4 Flex

Grow and Shrink – The grow utility allows the flex item to acquire all the available space. To make this kind of flex item, add .flex-grow-* class to the element which you want to grow.

Add the .flex-shrink-* class to shrink the flex item.

Example

Output

Bootstrap 4 Flex

Order – Bootstrap 4 allows you to change or set the order of the flex items with the help of order utilities. The order class applies for a maximum of 12 items, which means that you can set the order of 12 items at a time as per the choice. In order utility, the lowest number has the highest priority. To change the visual order of the flex items, add .order-*  (* = 1 to 12) class to the flex item element.

Example

Output

Bootstrap 4 Flex

Auto Margins – There are some classes of Bootstrap 4 that provides us some amazing feature and auto margins is one of them. It has classes that automatically provide the margin to the flex items. To provide the left margin to the flex items, add .ml-auto class to the flex item element. To provide the right margin to the flex item, add .mr-auto class to the flex item element.

Example

Output

Bootstrap 4 Flex

Wrap – You can also control the wrapping of flex items in a flex container. There is three wrapping class which is offered by bootstrap, these are:

  • .flex-nowrap – This is a browser’s default class.
  • .flex-wrap – This class is used to wrap flex items in a flex container.
  • .flex-wrap-reverse – This class is also used to wrap flex items in a flex container but in reverse order.

Example

Output

Bootstrap 4 Flex

Align Content – You can control the vertical alignment of the flex items in the flex container by using align content utilities. The classes of align content are: .align-content-start class which is default class, .align-content-end, .align-content-center, .align-content-between, .align-content-around, and .align-content-stretch.

Note – These classes are not applicable to the single row items.

Example

Output

Bootstrap 4 Flex
Bootstrap 4 Flex

Align Items – The align item class is used to control the alignment of flex items in a flex container. The .align-items-* class is only applicable on single row. The classes of aligned item are:  .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch.

Example

Output

Bootstrap 4 Flex
Bootstrap 4 Flex

Align Self – Align-self is used to change the alignment of individual flex items in a flex container. To align individual flex items, add the .align-self- * class to the flex item.

Where, * = start, end, center, baseline, and stretch.

Example

Output

Bootstrap 4 Flex
Bootstrap 4 Flex

Pin It on Pinterest

Share This