Open In App

Bootstrap 5 Flex Enable Flex Behaviors

Improve
Improve
Like Article
Like
Save
Share
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=
          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
Previous
Next
Share your thoughts in the comments
Similar Reads