Bootstrap 5 Flex Enable Flex Behaviors

Last Updated : 28 Nov, 2022

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/bootstrap@5.0.2/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/bootstrap@5.0.2/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

Explore