Bootstrap 5 Flex Enable Flex Behaviors
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
Last Updated :
28 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...