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=
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=
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