Lesson 30: Flexing in Bootstrap 5

The biggest difference between Bootstrap 3 and Bootstrap 4 & 5 is that Bootstrap 5 now uses flexboxes instead of floats to handle layout .

 

The Flexible Box Layout Module makes it easy to design responsive layout structures without having to use floats or define positions.

Note: Flexbox is not supported in IE 9 and earlier. If you need IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap and it is still supported to fix critical bugs and changes in the documentation. However, it will not receive new features.

To create a flexbox container and pass subdirectories directly into flex items , use the d-flex class :

 Flex item 1 Flex item 2 Flex item 3 

For example:

 Bootstrap Example TipsMake VnDoc Downloadvn 

 

To create an inline flexbox container, use the class d-inline-flex:

 Flex item 1 Flex item 2 Flex item 3 

For example:

 Bootstrap Example 

Inline Flex

 TipsMake VnDoc Downloadvn 

Horizontal

Used .flex-rowto display flex items horizontally (one after another). This is the default setting.

Tip: Use this .flex-row-reverseto align horizontally.

 Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 

 

For example:

 Bootstrap Example 

Horizontal

Use .flex-row to make flex items appear side-by-side (default):

 TipsMake VnDoc Downloadvn

Use .flex-row-reverse to adjust the orientation to the right:

 TipsMake VnDoc Downloadvn 

Vertical

Used .flex-columnto display flex items vertically (top of each other) or .flex-column-reverseto reverse the vertical orientation:

 Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 

For example:

 Bootstrap Example 

Vertical

Use .flex-column to display items vertically:

 TipsMake VnDoc Downloadvn

Use .flex-column-reverse to reverse the direction:

 TipsMake VnDoc Downloadvn 

 

Content alignment

Use classes .justify-content-* to change the alignment of items. Valid classes are start(default), end, center, betweenor around:

. . . . .

For example:

 Bootstrap Example 

Use the `.justify-content-*` class to align flex items from the beginning (default), end, center, middle, or around:

 TipsMake VnDoc Downloadvn TipsMake VnDoc Downloadvn TipsMake VnDoc Downloadvn TipsMake VnDoc Downloadvn TipsMake VnDoc Downloadvn 

 

Equal width

Use .flex-fillon flex items to force them to have the same width:

 Flex item 1 Flex item 2 Flex item 3 

For example:

 Bootstrap Example 

Example using .flex-fill:

 TipsMake VnDoc Downloadvn

Examples without using .flex-fill:

 TipsMake VnDoc Downloadvn 

Grow

Use .flex-grow-1`flex` on a flex item so that it occupies the remaining space. In the example below, the first two flex items occupy the space they require, and the last one takes up the remaining space:

 Flex item 1 Flex item 2 Flex item 3 

For example:

 Bootstrap Example 

Grow

Use .flex-grow-1:

 TipsMake VnDoc Downloadvn

Do not use .flex-grow-1:

 TipsMake VnDoc Downloadvn 

Tip: Use .flex-shrink-1on a flex item to make it shrink if needed.

Order

Change the image order of a specific flex item using a class .order. Valid classes range from 0 to 5, where the lowest number takes highest priority (order-1 appears before order-2…).

 Flex item 1 Flex item 2 Flex item 3 

For example:

 Bootstrap Example TipsMake 1 TipsMake 2 TipsMake 3 

 

Automatic margin alignment

Easily add automatic margins to flex items using .ms-auto (pushes the item to the right) or use .me-auto`.ms-auto` (pushes the item to the left):

 Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 

For example:

 Bootstrap Example TipsMake VnDoc Downloadvn TipsMake VnDoc Downloadvn 

Wrap

Inspect flex items within a flex container with .flex-nowrap (default)` flex` .flex-wrapor `flex` .flex-wrap-reverse.

Click on the buttons below to see the differences between the 3 classes, by changing the 'wrap' of the flex items in the example box.

. . .

For example:

 Bootstrap Example 

Wrap

Control how items are arranged within a flex container using `.flex-nowrap` (default), `.flex-wrap`, or `.flex-wrap-reverse`.

.flex-wrap:

 TipsMake 1 TipsMake 2 TipsMake 3 TipsMake 4 TipsMake 5 TipsMake 6 TipsMake 7 TipsMake 8 TipsMake 9 TipsMake 10 TipsMake 11 TipsMake 12 TipsMake 13 TipsMake 14 TipsMake 15 TipsMake 16 TipsMake 17 TipsMake 18 TipsMake 19 TipsMake 20 TipsMake 21 TipsMake 22 TipsMake 23 TipsMake 24 TipsMake 25 

.flex-wrap-reverse:

 TipsMake 1 TipsMake 2 TipsMake 3 TipsMake 4 TipsMake 5 TipsMake 6 TipsMake 7 TipsMake 8 TipsMake 9 TipsMake 10 TipsMake 11 TipsMake 12 TipsMake 13 TipsMake 14 TipsMake 15 TipsMake 16 TipsMake 17 TipsMake 18 TipsMake 19 TipsMake 20 TipsMake 21 TipsMake 22 TipsMake 23 TipsMake 24 TipsMake 25 

.flex-nowrap:

 TipsMake 1 TipsMake 2 TipsMake 3 TipsMake 4 TipsMake 5 TipsMake 6 TipsMake 7 TipsMake 8 TipsMake 9 TipsMake 10 TipsMake 11 TipsMake 12 TipsMake 13 TipsMake 14 TipsMake 15 TipsMake 16 TipsMake 17 TipsMake 18 TipsMake 19 TipsMake 20 TipsMake 21 TipsMake 22 TipsMake 23 TipsMake 24 TipsMake 25 TipsMake 26 TipsMake 27 TipsMake 28 TipsMake 29 TipsMake 30 TipsMake 31 TipsMake 32 TipsMake 33 TipsMake 34 TipsMake 35 
 

 

Adjust content margins

Control the vertical alignment of flex-gathered items with .align-content-*. Valid classes are .align-content-start(default), .align-content-end, .align-content-center, .align-content-between, .align-content-aroundand .align-content-stretch.

Note: These classes do not have any effect on individual flex items.

Click the buttons below to see the differences between the 5 classes by changing the vertical alignment of the flex items in the sample code box:

. . . . .

For example:

 Bootstrap Example 

.align-content-start (default):

 TipsMake 1 TipsMake 2 TipsMake 3 TipsMake 4 TipsMake 5 TipsMake 6 TipsMake 7 TipsMake 8 TipsMake 9 TipsMake 10 TipsMake 11 TipsMake 12 TipsMake 13 TipsMake 14 TipsMake 15 TipsMake 16 TipsMake 17 TipsMake 18 TipsMake 19 TipsMake 20 TipsMake 21 TipsMake 22 TipsMake 23 TipsMake 24 TipsMake 25 

.align-content-end:

 TipsMake 1 TipsMake 2 TipsMake 3 TipsMake 4 TipsMake 5 TipsMake 6 TipsMake 7 TipsMake 8 TipsMake 9 TipsMake 10 TipsMake 11 TipsMake 12 TipsMake 13 TipsMake 14 TipsMake 15 TipsMake 16 TipsMake 17 TipsMake 18 TipsMake 19 TipsMake 20 TipsMake 21 TipsMake 22 TipsMake 23 TipsMake 24 TipsMake 25 

.align-content-center:

 TipsMake 1 TipsMake 2 TipsMake 3 TipsMake 4 TipsMake 5 TipsMake 6 TipsMake 7 TipsMake 8 TipsMake 9 TipsMake 10 TipsMake 11 TipsMake 12 TipsMake 13 TipsMake 14 TipsMake 15 TipsMake 16 TipsMake 17 TipsMake 18 TipsMake 19 TipsMake 20 TipsMake 21 TipsMake 22 TipsMake 23 TipsMake 24 TipsMake 25 

.align-content-around:

 TipsMake 1 TipsMake 2 TipsMake 3 TipsMake 4 TipsMake 5 TipsMake 6 TipsMake 7 TipsMake 8 TipsMake 9 TipsMake 10 TipsMake 11 TipsMake 12 TipsMake 13 TipsMake 14 TipsMake 15 TipsMake 16 TipsMake 17 TipsMake 18 TipsMake 19 TipsMake 20 TipsMake 21 TipsMake 22 TipsMake 23 TipsMake 24 TipsMake 25 

.align-content-stretch:

 TipsMake 1 TipsMake 2 TipsMake 3 TipsMake 4 TipsMake 5 TipsMake 6 TipsMake 7 TipsMake 8 TipsMake 9 TipsMake 10 TipsMake 11 TipsMake 12 TipsMake 13 TipsMake 14 TipsMake 15 TipsMake 16 TipsMake 17 TipsMake 18 TipsMake 19 TipsMake 20 TipsMake 21 TipsMake 22 TipsMake 23 TipsMake 24 TipsMake 25 
 

Align item

Control the vertical alignment of individual flex items in rows using the class .align-items-*. Valid classes are .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default). Sample code:

. . . . .

Align Self

Vertical alignment control of a flexible item is specified with classes .align-self-*. Valid classes are .align-self-start, .align-self-end, .align-self-center, . align-self-baselineand .align-self-stretch(default). Sample code:

 Flex item 1 Flex item 2 Flex item 3 

Class Flex meets

All flex classes have an additional responsive class. This makes it easy to set up a specific flex class for a given screen size.

The icon *can be replaced with sm, md, lg, xl, or xxl, corresponding to small, medium, large, extra-large, and super-large screens, respectively.

Class	Mô tả
Flex Container
.d-*-flex	Tạo flexbox container cho các màn hình khác nhau
.d-*-inline-flex	Tạo inline flexbox container cho các màn hình khác nhau
Direction
.flex-*-row	Hiện các mục flex theo chiều ngang
.flex-*-row-reverse	Hiện các mục flex theo chiều ngang và căn phải
.flex-*-column	Hiện các mục flex theo chiều dọc
.flex-*-column-reverse	Hiện các mục flex theo chiều dọc và đảo ngược vị trí
Justified Content
.justify-content-*-start	Hiện các mục flex ngay từ đầu (căn trái)
.justify-content-*-end	Hiện các mục flex ở cuối (căn phải)
.justify-content-*-center	Hiện các mục flex container ở trung tâm của màn hình
.justify-content-*-between	Hiện các mục flex nằm ở giữa trên các màn hình khác nhau
.justify-content-*-around	Hiện các mục flex xung quanh màn hình.
Fill / Equal Width
.flex-*-fill	Chỉnh cùng chiều rộng cho các mục flex
Grow
.flex-*-grow-0	Các mục flex không mở rộng trên các màn hình khác nhau
.flex-*-grow-1	Mở rộng các mục flex
Shrink
.flex-*-shrink-0	Không thu hẹp các mục flex trên màn hình
.flex-*-shrink-1	Thu hẹp các mục flex trên màn hình
Order
.order-*-0-12	Thay đổi thứ tự từ 0 tới 5
Wrap
.flex-*-nowrap	Không "wrap" các mục
.flex-*-wrap	Đóng gói các mục
.flex-*-wrap-reverse	Đảo ngược đóng gói các mục trên màn hình
Align Content
.align-content-*-start	Căn chỉnh các mục đã thu thập từ đầu trên các màn hình khác nhau
.align-content-*-end	Căn chỉnh các mục đã thu thập ở cuối trên các màn hình khác nhau
.align-content-*-center	Căn chỉnh các mục đã thu thập ở trung tâm trên các màn hình khác nhau
.align-content-*-around	Căn chỉnh các mục được thu thập "xung quanh" trên các màn hình khác nhau
.align-content-*-stretch	Kéo dài các mục đã thu thập trên các màn hình khác nhau
Align Items
.align-items-*-start	Căn chỉnh các hàng đơn lẻ từ đầu trên các màn hình khác nhau
.align-items-*-end	Căn chỉnh các hàng đơn ở cuối trên các màn hình khác nhau
.align-items-*-center	Căn chỉnh các hàng đơn lẻ ở trung tâm trên các màn hình khác nhau
.align-items-*-baseline	Căn chỉnh các hàng đơn lẻ ở đường cơ sở trên các màn hình khác nhau
.align-items-*-stretch	Kéo dài các hàng đơn lẻ trên các màn hình khác nhau
Align Self
.align-self-*-start	Căn chỉnh một mục flex ngay từ đầu trên các màn hình khác nhau
.align-self-*-end	Căn chỉnh một mục flex ở cuối trên các màn hình khác nhau
.align-self-*-center	Căn chỉnh một mục flex ở trung tâm trên các màn hình khác nhau
.align-self-*-baseline	Căn chỉnh một mục flex ở baseline trên các màn hình khác nhau
.align-self-*-stretch	Kéo dài một mục flex trên các màn hình khác nhau

Above is everything you need to know about flex in Bootstrap 5. Hopefully, this article is helpful to you.