Bootstrap 5 Flex Enable Flex Behaviors Last Updated : 28 Nov, 2022 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Enable Flex Behaviors are used to apply display utilities to create a flexbox container and transform direct children elements into flex items. With more flex properties, flex items and containers can be further modified. Utility classes: .d-flex: It displays an element as a flex container..d-inline-flex: It displays an element as an inline-level flex container. For responsive variations, we can also use the following classes: .d-sm-flex: It displays an element as a flex container when screen size changes to sm..d-sm-inline-flex: It displays an element as an inline flex container when screen size changes to sm..d-md-flex: It displays an element as a flex container when screen size changes to md..d-md-inline-flex: It displays an element as an inline flex container when screen size changes to md..d-lg-flex: It displays an element as a flex container when screen size changes to lg..d-lg-inline-flex: It displays an element as an inline flex container when screen size changes to lg..d-xl-flex: It displays an element as a flex container when screen size changes to xl..d-xl-inline-flex: It displays an element as an inline flex container when screen size changes to xl..d-xxl-flex: It displays an element as a flex container when screen size changes to xxl..d-xxl-inline-flex: It displays an element as an inline flex container when screen size changes to xxl. Note: .d-inline-flex does not make flex items display inline rather it makes the flex container display inline. Syntax: <div class="d-flex ">...</div> Example 1: In this example, we will implement the .d-flex property. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <title>Enable Flex Behaviour</title> </head> <body class="text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <h2 class="text-secondary"> Enable Flex Behaviour </h2> <div class="d-flex mb-3"> <div class="p-3 bg-warning">Box-1</div> <div class="p-3 bg-info">Box-2</div> <div class="p-3 bg-light">Box-3</div> </div> </body> </html> Output: Example: In this example, we will implement the .d-inline-flex property. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <title>Enable flex Behaviour</title> </head> <body class="text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <h2 class="text-secondary"> Enable Flex Behaviour </h2> <div class="d-inline-flex"> <div class="p-3 bg-warning">Box-1</div> <div class="p-3 bg-info">Box-2</div> <div class="p-3 bg-light">Box-3</div> </div> </body> </html> Output: References: https://getbootstrap.com/docs/5.0/utilities/flex/#enable-flex-behaviors Comment More infoAdvertise with us Next Article Bootstrap 5 Flex Align Self C chaityavora02 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Navbar Responsive behaviors Toggler Bootstrap 5 Navbar has an amazing feature that makes it very innovatively responsive to different screen and viewport sizes which is its transformation into the Toggler. The elements' visibility in the navbar can be toggled with the use of a toggler in the Navbar. To control when their information c 5 min read Bootstrap 5 Flex Align Self Bootstrap5 Flex Align Self property is used to change each item's alignment individually on the cross-axis. By default, it starts from the y-axis, if we want to change the alignment on the x-axis change the value of the class flex-direction to the column. There are some classes that can be used to s 3 min read Bootstrap 5 Flex Align Content Bootstrap 5 Flex Align Content provides utilities for aligning flex items along the cross-axis. Options include start, end, center, around, and stretch, accommodating various layout requirements across different screen sizes. Bootstrap 5 Flex Align Content Classes: ClassDescriptionalign-content-star 2 min read Bootstrap 5 Flex Align items Bootstrap 5 Flex Align items to change the alignment of flex items on the cross-axis using align-items classes. The CSS align-items property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. iframe { width: 100%; height: 500px;} @med 3 min read Bootstrap 5 Flex Fill Bootstrap 5 Flex fill can be used to force the flex items to take the width according to their content. If the content of any sibling element does not exceed its border, all the flex items with flex fill classes will take up equal widths. Bootstrap 5 Flex Fill Classes:flex-fill: This class is used o 2 min read Bootstrap 5 Using the API Enable Responsive The Bootstrap Utilities are generated with the Bootstrap utility API. It can be used to modify or add to the default set of utility classes via Sass.For generating new families of classes with various options it uses Sass maps and functions. The utility API helps to quickly apply styles to HTML elem 2 min read Like