Bootstrap 5 Utilities Flexbox Options

Last Updated : 26 Apr, 2023

Bootstrap 5 layout utility classes are a set of pre-defined classes that can be used to create responsive and flexible layouts. These classes include options for setting the width and height of elements, controlling the placement of elements using margins and padding, and arranging elements using a flexbox. In this article, we’ll know about Bootstrap 5 utilities flexbox options.

Flexbox options: Bootstrap 5 includes several Flexbox options that can be used with its utility classes to make it easier to create flexible and responsive layouts. These utilities can quickly add common flexbox properties to your HTML elements, such as flex-direction, justify-content, and align-items.

Syntax: First, we enable the flexbox in our code then we add the attribute, for enable the flexbox we add a class “d-flex”.

<div class="d-flex">
      ...
</div>

Then, we add another class after the “d-flex” class for adding some attributes like:

<div class="d-flex flex-row justify-content-center">
      ...
</div>

Flexbox Utilities:

Enable Flex Behaviors: This is used to apply display utilities for creating a flexbox container and transform the child elements into flex items. With more flex properties, flex items and containers can be further modified.
Direction: The “flex-direction” property determines the direction of the flex container’s main axis.
Justify content: It is used to align the flex items along the main axis in the flex container.
Align items: The “align-items” property aligns flex items along the cross-axis of the flex container.
Align self: The “align-self” property overrides the “align-items” property for a single flex item.
Grow and shrink: The “flex-grow” and “flex-shrink” properties control how much a flex item grows or shrinks relative to the other flex items in the container. They are set using numeric values.
Auto margin: The “mx-auto” utility class can be used to horizontally center a flex container or flex item within its parent container.
Wrap: The “flex-wrap” property determines whether flex items should wrap to the next row or column when there is not enough space in the flex container.
Order: The “order” property determines the order in which flex items are displayed within the flex container. It can be set using numeric values, with lower values appearing first.

Example 1: Let’s see an example of Enable Flex Behaviors of the Flexbox option.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet" />
 
</head>
 
<body class="text-center">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
   
    <div><b>BootStarp5 Utilities Flexbox options</b></div>
   
      <div class="d-inline-flex">
        <div class="p-3  bg-danger">GFG</div>
        <div class="p-3  bg-secondary">GFG</div>
        <div class="p-3  bg-primary">GFG</div>
    </div>
</body>
 
</html>

Output:

Example 2: Let’s see another example of the flexbox Order of the flexbox option.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
        rel="stylesheet">
</head>
 
<body>
    <div class="container text-center ">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h5>
            BootStarp5 Utilities Flexbox options
        </h5>
    </div>
    <div class="d-flex flex-nowrap justify-content-center">
        <div class="order-3 p-3 border bg-danger">
            GFG 1
        </div>
        <div class="order-1 p-3 border bg-primary">
            GFG 2
        </div>
        <div class="order-2 p-3 border bg-info">
            GFG 3
        </div>
        <div class="order-4 p-3 border bg-warning">
            GFG 4
        </div>
    </div>
</body>
 
</html>