Flex
With Bootstrap 5 Flex, you can create layouts that are both responsive and visually appealing. To use Bootstrap 5 Flex, you first need to wrap the elements that you want to make flex items in a flex container.
| Utilities |
Descriptions |
|---|---|
| Enable flex behaviors | Utilize display utilities to make a flexbox container that can be customizeable with other flex properties. |
| Direction | Bootstrap 5 flex-direction is a property that controls the direction in which flex items are arranged. The default direction is row, which means that flex items are arranged in a horizontal row. |
| Justify content | Bootstrap 5 flex justify-content is a property that controls the alignment of flex items on the main axis. |
| Align items | Bootstrap 5 flex align-items utilities allow you to change the alignment of flex items on the cross-axis. |
| Align self | Bootstrap 5 flex align-self utilities allow you to change the alignment of a flex item on the cross-axis, independently of the other flex items in the container. |
| Fill | The Bootstrap 5 flex fill utility allows you to force flex items into equal widths while taking up all available horizontal space. |
| Grow and shrink | Flex grow determines how much a flex item grows relative to the other flex items in the container when there is extra space whereas Flex shrink determines how much a flex item shrinks relative to the other flex items in the container when there is not enough space for all of the flex items to fit at their natural size. |
| Auto margins | Bootstrap 5 flex auto margins are a set of utility classes that can be used to add auto margins to flex items. |
| Wrap | Bootstrap 5 flex-wrap is a CSS utility class that allows you to change how flex items wrap in a flex container. |
| Order | Bootstrap 5 flex order is a utility class that can be used to change the visual order of specific flex items. |
| Align content | Bootstrap 5 Flex Align Content is a set of utilities that allow you to control how flex items are aligned on the cross-axis. |
| Media object | Bootstrap 5 Flex Media Object is a combination of two Bootstrap classes, .media and .media-body, to create a flexible layout for media objects. |
| Sass | Bootstrap 5 Flex SaaS is a software as a service (SaaS) solution that provides a framework for building responsive web applications using Bootstrap 5. |
Bootstrap 5 Utility Reference
Bootstrap 5 Utility facilitates various types of utilities to make a stylish, mobile-friendly, and responsive front-end website. The utility layout is used for showing, hiding, aligning, and spacing content.
The complete list of Utilities is listed below with their brief description:
Contact Us