”;
This chapter discusses about the flex utilities. The .flex utility classes are helpful in quickly managing the layout, alignment and sizing of grid columns, navigation, components and much more.
Enable flex behaviors
Utilize display utilities to establish a flexbox container and convert immediate child elements into flex items, allowing for further customization of flex containers and items through additional flex properties.
Let us see an example for a flex container and an inline flex container:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Flex utilities</h4>
<div class="d-flex p-4 bg-info">A simple flexbox container!</div>
<div class="d-inline-flex p-4 bg-warning">An inline flexbox container!</div>
</body>
</html>
Variations that adapt to different screen sizes are also available for the classes .d-flex and .d-inline-flex.
-
.d-flex
-
.d-inline-flex
-
.d-sm-flex
-
.d-sm-inline-flex
-
.d-md-flex
-
.d-md-inline-flex
-
.d-lg-flex
-
.d-lg-inline-flex
-
.d-xl-flex
-
.d-xl-inline-flex
-
.d-xxl-flex
-
.d-xxl-inline-flex
Direction
Using the direction utilities, you can set the direction of flex items in a flex container. Following are the direction utilities provided by Bootstrap:
-
.flex-row – to set a horizontal direction, which is also the browser default.
-
.flex-row-reverse – to start the horizontal direction from the opposite side.
-
.flex-column – to set a vertical direction.
-
.flex-column-reverse – to start the vertical direction from the opposite side.
Let us see an example for the direction utility classes:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Flex utilities - direction (row & column)</h4>
<div class="d-flex flex-row mb-4 bg-info border border-dark">
<div class="p-3 border border-dark">Row One</div>
<div class="p-3 border border-dark">Row Two</div>
<div class="p-3 border border-dark">Row Three</div>
</div>
<div class="d-flex flex-row-reverse bg-warning border border-success">
<div class="p-3 border border-success">Row Four</div>
<div class="p-3 border border-success">Row Five</div>
<div class="p-3 border border-success">Row Six</div>
</div>
<div class="d-flex flex-column mb-3 bg-danger-subtle bg-gradient border border-dark">
<div class="p-3 border border-dark">Column One</div>
<div class="p-3 border border-dark">Column Two</div>
<div class="p-3 border border-dark">Column Three</div>
</div>
<div class="d-flex flex-column-reverse bg-light border border-dark">
<div class="p-3 border border-dark">Column Four</div>
<div class="p-3 border border-dark">Column Five</div>
<div class="p-3 border border-dark">Column Six</div>
</div>
</body>
</html>
Variations that adapt to different screen sizes are also available for the class .flex-direction:
-
.flex-row
-
.flex-row-reverse
-
.flex-column
-
.flex-column-reverse
-
.flex-sm-row
-
.flex-sm-row-reverse
-
.flex-sm-column
-
.flex-sm-column-reverse
-
.flex-md-row
-
.flex-md-row-reverse
-
.flex-md-column
-
.flex-md-column-reverse
-
.flex-lg-row
-
.flex-lg-row-reverse
-
.flex-lg-column
-
.flex-lg-column-reverse
-
.flex-xl-row
-
.flex-xl-row-reverse
-
.flex-xl-column
-
.flex-xl-column-reverse
-
.flex-xxl-row
-
.flex-xxl-row-reverse
-
.flex-xxl-column
-
.flex-xxl-column-reverse
Justify content
The .justify-content utility classes are used to change the alignment of flex items on the main axis, i.e. x -axis to start, and y-axis in case of flex-direction: column.
The different options available are:
-
start
-
end
-
center
-
between
-
around
-
evenly
Let us see an example for the justify content classes:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Flex utilities - Justify content</h4>
<div class="d-flex justify-content-start mb-4 bg-info border border-dark">
<div class="p-3 border border-dark">Row One</div>
<div class="p-3 border border-dark">Row Two</div>
<div class="p-3 border border-dark">Row Three</div>
</div>
<div class="d-flex justify-content-end mb-4 bg-warning border border-success">
<div class="p-3 border border-success">Row Four</div>
<div class="p-3 border border-success">Row Five</div>
<div class="p-3 border border-success">Row Six</div>
</div>
<div class="d-flex justify-content-center mb-4 bg-danger-subtle bg-gradient border border-dark">
<div class="p-3 border border-dark">Column One</div>
<div class="p-3 border border-dark">Column Two</div>
<div class="p-3 border border-dark">Column Three</div>
</div>
<div class="d-flex justify-content-between mb-4 bg-light border border-dark">
<div class="p-3 border border-dark">Column Four</div>
<div class="p-3 border border-dark">Column Five</div>
<div class="p-3 border border-dark">Column Six</div>
</div>
<div class="d-flex justify-content-around mb-4 bg-success-subtle bg-gradient border border-dark">
<div class="p-3 border border-dark">Column Four</div>
<div class="p-3 border border-dark">Column Five</div>
<div class="p-3 border border-dark">Column Six</div>
</div>
<div class="d-flex justify-content-evenly mb-4 bg-primary-subtle bg-gradient border border-dark">
<div class="p-3 border border-dark">Column Four</div>
<div class="p-3 border border-dark">Column Five</div>
<div class="p-3 border border-dark">Column Six</div>
</div>
</div>
</body>
</html>
Variations that adapt to different screen sizes are also available for the class .justify-content:
-
.justify-content-start
-
.justify-content-end
-
.justify-content-center
-
.justify-content-between
-
.justify-content-around
-
.justify-content-evenly
-
.justify-content-sm-start
-
.justify-content-sm-end
-
.justify-content-sm-center
-
.justify-content-sm-between
-
.justify-content-sm-around
-
.justify-content-sm-evenly
-
.justify-content-md-start
-
.justify-content-md-end
-
.justify-content-md-center
-
.justify-content-md-between
-
.justify-content-md-around
-
.justify-content-md-evenly
-
.justify-content-lg-start
-
.justify-content-lg-end
-
.justify-content-lg-center
-
.justify-content-lg-between
-
.justify-content-lg-around
-
.justify-content-lg-evenly
-
.justify-content-xl-start
-
.justify-content-xl-end
-
.justify-content-xl-center
-
.justify-content-xl-between
-
.justify-content-xl-around
-
.justify-content-xl-evenly
-
.justify-content-xxl-start
-
.justify-content-xxl-end
-
.justify-content-xxl-center
-
.justify-content-xxl-between
-
.justify-content-xxl-around
-
.justify-content-xxl-evenly
Align items
In order to change the alignment of flex items of a flexbox container, use the utility class align-items.
The options available in Bootstrap are as follows:
-
start
-
end
-
center
-
baseline
-
stretch (browser default)
Let us see an example for the align items utility class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Flex utilities - align items</h4>
<div class="d-flex align-items-start flex-row border bg-light mb-4" style="height:150px;">
<div class="border border-dark p-2 text-bg-success">
Item 1
</div>
<div class="border border-dark p-2 text-bg-primary">
Item 2
</div>
<div class="border border-dark p-2 text-bg-danger">
Item 3
</div>
</div>
<div class="d-flex align-items-end flex-row border bg-light" style="height:150px;">
<div class="border border-dark p-2 bg-info-subtle">
Item 1
</div>
<div class="border border-dark p-2 bg-secondary-subtle">
Item 2
</div>
<div class="border border-dark p-2 bg-warning-subtle">
Item 3
</div>
</div>
<div class="d-flex align-items-center flex-row border bg-light" style="height:150px;">
<div class="border border-dark p-2 text-bg-info">
Item 1
</div>
<div class="border border-dark p-2 text-bg-secondary">
Item 2
</div>
<div class="border border-dark p-2 text-bg-warning">
Item 3
</div>
</div>
</body>
</html>
Variations that adapt to different screen sizes are also available for the class .align-items:
-
.align-items-start
-
.align-items-end
-
.align-items-center
-
.align-items-baseline
-
.align-items-stretch
-
.align-items-sm-start
-
.align-items-sm-end
-
.align-items-sm-center
-
.align-items-sm-baseline
-
.align-items-sm-stretch
-
.align-items-md-start
-
.align-items-md-end
-
.align-items-md-center
-
.align-items-md-baseline
-
.align-items-md-stretch
-
.align-items-lg-start
-
.align-items-lg-end
-
.align-items-lg-center
-
.align-items-lg-baseline
-
.align-items-lg-stretch
-
.align-items-xl-start
-
.align-items-xl-end
-
.align-items-xl-center
-
.align-items-xl-baseline
-
.align-items-xl-stretch
-
.align-items-xxl-start
-
.align-items-xxl-end
-
.align-items-xxl-center
-
.align-items-xxl-baseline
-
.align-items-xxl-stretch
Align self
In order to change the alignment of an individual flexbox item in a container, use the utility class align-self. The options available for this utility class are as follows:
-
start
-
end
-
center
-
baseline
-
stretch (browser default)
Let us see an example for the align items utility class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h4>Flex utilities - align self</h4>
<div class="d-flex flex-row border bg-light mb-4" style="height:150px;">
<div class="border border-dark p-2 text-bg-success">
Item 1
</div>
<div class="align-self-start border border-dark p-2 text-bg-primary">
align start
</div>
<div class="border border-dark p-2 text-bg-danger">
Item 3
</div>
</div>
<div class="d-flex flex-row border bg-light" style="height:150px;">
<div class="border border-dark p-2 bg-info-subtle">
Item 1
</div>
<div class="align-self-end border border-dark p-2 bg-secondary-subtle">
align end
</div>
<div class="border border-dark p-2 bg-warning-subtle">
Item 3
</div>
</div>
<div class="d-flex flex-row border bg-light" style="height:150px;">
<div class="align-self-center border border-dark p-2 text-bg-info">
align center
</div>
<div class="border border-dark p-2 text-bg-secondary">
Item 2
</div>
<div class="border border-dark p-2 text-bg-warning">
Item 3
</div>
</div>
<div class="d-flex flex-row border bg-light" style="height:150px;">
<div class="border border-dark p-2 bg-info-subtle">
Item 1
</div>
<div class="align-self-baseline border border-dark p-2 bg-secondary-subtle">
align baseline
</div>
<div class="border border-dark p-2 bg-warning-subtle">
Item 3
</div>
</div>
<div class="d-flex flex-row border bg-light mb-4" style="height:150px;">
<div class="border border-dark p-2 text-bg-success">
Item 1
</div>
<div class="border border-dark p-2 text-bg-primary">
Item 2
</div>
<div class="align-self-stretch border border-dark p-2 text-bg-danger">
align stretch
</div>
</div>
</div>
</body>
</html>
Variations that adapt to different screen sizes are also available for the class .align-self:
-
.align-self-start
-
.align-self-end
-
.align-self-center
-
.align-self-baseline
-
.align-self-stretch
-
.align-self-sm-start
-
.align-self-sm-end
-
.align-self-sm-center
-
.align-self-sm-baseline
-
.align-self-sm-stretch
-
.align-self-md-start
-
.align-self-md-end
-
.align-self-md-center
-
.align-self-md-baseline
-
.align-self-md-stretch
-
.align-self-lg-start
-
.align-self-lg-end
-
.align-self-lg-center
-
.align-self-lg-baseline
-
.align-self-lg-stretch
-
.align-self-xl-start
-
.align-self-xl-end
-
.align-self-xl-center
-
.align-self-xl-baseline
-
.align-self-xl-stretch
-
.align-self-xxl-start
-
.align-self-xxl-end
-
.align-self-xxl-center
-
.align-self-xxl-baseline
-
.align-self-xxl-stretch
Fill
When applying the .flex-fill class to a group of sibling elements, they will automatically adjust their widths to match their content (or have equal widths if their content does not exceed their border-boxes), effectively utilizing all the horizontal space available.
Let us see an example for the .flex-fill class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h4>Flex utilities - flex-fill</h4>
<div class="d-flex border border-dark bg-danger-subtle">
<div class="p-2 border border-dark flex-fill">Flex item showing a longer string of text.</div>
<div class="p-2 border border-dark flex-fill">Item</div>
<div class="p-2 border border-dark flex-fill">Flex Item 3</div>
</div>
</div>
</body>
</html>
Variations that adapt to different screen sizes are also available for the class .flex-fill:
-
.flex-fill
-
.flex-sm-fill
-
.flex-md-fill
-
.flex-lg-fill
-
.flex-xl-fill
-
.flex-xxl-fill
Grow
You can utilize the .flex-grow-* utility classes to control whether a flex item should expand to occupy the available space.
Let us see an example of .flex-grow class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Flex utilities - flex-grow</h4>
<div class="d-flex border border-dark bg-danger-subtle">
<div class="p-2 border border-dark">Flex item</div>
<div class="p-2 flex-grow-1 border border-dark">Flex</div>
<div class="p-2 border border-dark">Third flex item</div>
</div>
</div>
</body>
</html>
Shrink
You can utilize the .flex-shrink-* utility classes to control whether a flex item should shrunk, if required.
Let us see an example of .flex-shrink class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Flex utilities - flex-shrink</h4>
<div class="d-flex border border-dark bg-danger-subtle">
<div class="p-2 border border-dark w-100">Flex item taking up all the space</div>
<div class="p-2 border border-dark flex-shrink-1">Flex item shrink</div>
</div>
</div>
</body>
</html>
Variations that adapt to different screen sizes are also available for the classes .flex-grow and .flex-shrink:
-
.flex-{grow|shrink}-0
-
.flex-{grow|shrink}-1
-
.flex-sm-{grow|shrink}-0
-
.flex-sm-{grow|shrink}-1
-
.flex-md-{grow|shrink}-0
-
.flex-md-{grow|shrink}-1
-
.flex-lg-{grow|shrink}-0
-
.flex-lg-{grow|shrink}-1
-
.flex-xl-{grow|shrink}-0
-
.flex-xl-{grow|shrink}-1
-
.flex-xxl-{grow|shrink}-0
-
.flex-xxl-{grow|shrink}-1
Auto margins
You can mix flex alignments with auto margins.
Following classes can be used with auto margins:
-
me-auto – pushes the flex items to extreme right.
-
ms-auto – pushes the flex items to extreme left.
-
No auto margin is default.
Let us see an example for auto margin classes:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Flex utilities - auto margin</h4>
<div class="d-flex mb-3 bg-primary-subtle">
<div class="p-2 border border-dark">No margin</div>
<div class="p-2 border border-dark">No margin</div>
<div class="p-2 border border-dark">No margin</div>
</div>
<div class="d-flex mb-3 bg-warning-subtle">
<div class="me-auto p-2 border border-dark">Right margin</div>
<div class="p-2 border border-dark">Right margin</div>
<div class="p-2 border border-dark">Right margin</div>
</div>
<div class="d-flex mb-3 bg-danger-subtle">
<div class="p-2 border border-dark">Left margin</div>
<div class="p-2 border border-dark">Left margin</div>
<div class="ms-auto p-2 border border-dark">Left margin</div>
</div>
</div>
</body>
</html>
With align-items
To position a flex item at the top or bottom of a container, utilize align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto in order to make vertical adjustments.
Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Flex utilities - with align items</h4>
<div class="d-flex align-items-start flex-column mb-3 text-bg-success border border-dark" style="height: 200px;">
<div class="mb-auto p-2 border border-dark">Align to left</div>
<div class="p-2 border border-dark">Align to left</div>
<div class="p-2 border border-dark">Align to left</div>
</div>
<div class="d-flex align-items-end flex-column mb-3 text-bg-warning border border-dark" style="height: 200px;">
<div class="p-2 border border-dark">Align to right</div>
<div class="p-2 border border-dark">Align to right</div>
<div class="mt-auto p-2 border border-dark">Align to right</div>
</div>
</div>
</body>
</html>
In the above example, mt-auto means margin-top: auto and mb-auto means margin-bottom: auto.
Wrap
The flex items of flex container can be wrapped. Following are the utility classes that can be used to wrap the flex items:
-
.flex-nowrap – for no wrapping at all (default).
-
.flex-wrap – for wrapping of flex items.
-
.flex-wrap-reverse – for reverse wrapping of flex items.
Let us see an example for .flex-nowrap class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h4>Flex utilities - no wrap</h4>
<div class="d-flex flex-nowrap text-bg-success border border-dark">
<div class="p-2 border border-dark">Flex Item 1</div>
<div class="p-2 border border-dark">Flex Item 2</div>
<div class="p-2 border border-dark">Flex Item 3</div>
<div class="p-2 border border-dark">Flex Item 4</div>
<div class="p-2 border border-dark">Flex Item 5</div>
<div class="p-2 border border-dark">Flex Item 6</div>
</div>
</div>
</body>
</html>
Let us see an example for .flex-wrap class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h4>Flex utilities - wrap items</h4>
<div class="d-flex flex-wrap text-bg-success border border-dark">
<div class="p-2 border border-dark">Wrap Flex Item 1</div>
<div class="p-2 border border-dark">Wrap Flex Item 2</div>
<div class="p-2 border border-dark">Wrap Flex Item 3</div>
<div class="p-2 border border-dark">Wrap Flex Item 4</div>
<div class="p-2 border border-dark">Wrap Flex Item 5</div>
<div class="p-2 border border-dark">Wrap Flex Item 6</div>
<div class="p-2 border border-dark">Wrap Flex Item 7</div>
<div class="p-2 border border-dark">Wrap Flex Item 8</div>
<div class="p-2 border border-dark">Wrap Flex Item 9</div>
<div class="p-2 border border-dark">Wrap Flex Item 10</div>
<div class="p-2 border border-dark">Wrap Flex Item 11</div>
<div class="p-2 border border-dark">Wrap Flex Item 12</div>
</div>
</div>
</body>
</html>
Let us see an example for .flex-wrap-reverse class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h4>Flex utilities - wrap reverse items</h4>
<div class="d-flex flex-wrap-reverse text-bg-success border border-dark">
<div class="p-2 border border-dark">Wrap reverse Item 1</div>
<div class="p-2 border border-dark">Wrap reverse Item 2</div>
<div class="p-2 border border-dark">Wrap reverse Item 3</div>
<div class="p-2 border border-dark">Wrap reverse Item 4</div>
<div class="p-2 border border-dark">Wrap reverse Item 5</div>
<div class="p-2 border border-dark">Wrap reverse Item 6</div>
<div class="p-2 border border-dark">Wrap reverse Item 7</div>
<div class="p-2 border border-dark">Wrap reverse Item 8</div>
<div class="p-2 border border-dark">Wrap reverse Item 9</div>
<div class="p-2 border border-dark">Wrap reverse Item 10</div>
<div class="p-2 border border-dark">Wrap reverse Item 11</div>
<div class="p-2 border border-dark">Wrap reverse Item 12</div>
</div>
</div>
</body>
</html>
Variations that adapt to different screen sizes are also available for the class .flex-wrap:
-
.flex-nowrap
-
.flex-wrap
-
.flex-wrap-reverse
-
.flex-sm-nowrap
-
.flex-sm-wrap
-
.flex-sm-wrap-reverse
-
.flex-md-nowrap
-
.flex-md-wrap
-
.flex-md-wrap-reverse
-
.flex-lg-nowrap
-
.flex-lg-wrap
-
.flex-lg-wrap-reverse
-
.flex-xl-nowrap
-
.flex-xl-wrap
-
.flex-xl-wrap-reverse
-
.flex-xxl-nowrap
-
.flex-xxl-wrap
-
.flex-xxl-wrap-reverse
Order
Using order utilities, you can change the visual order of specific flex items.
-
Option is available only to make an item first or last, and reset to utilize the DOM order.
-
order takes integer value starting from 0 to 5
.
Let us see an example for the .order class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h4>Flex utilities - order change</h4>
<div class="d-flex flex-nowrap text-bg-danger border border-dark">
<div class="order-4 p-3 border border-dark">Item one</div>
<div class="order-1 p-3 border border-dark">Item two</div>
<div class="order-2 p-3 border border-dark">Item three</div>
<div class="order-5 p-3 border border-dark">Item four</div>
<div class="order-3 p-3 border border-dark">Item five</div>
<div class="order-0 p-3 border border-dark">Item six</div>
</div>
</div>
</body>
</html>
Variations that adapt to different screen sizes are also available for the class .order:
-
.order-0
-
.order-1
-
.order-2
-
.order-3
-
.order-4
-
.order-5
-
.order-sm-0
-
.order-sm-1
-
.order-sm-2
-
.order-sm-3
-
.order-sm-4
-
.order-sm-5
-
.order-md-0
-
.order-md-1
-
.order-md-2
-
.order-md-3
-
.order-md-4
-
.order-md-5
-
.order-lg-0
-
.order-lg-1
-
.order-lg-2
-
.order-lg-3
-
.order-lg-4
-
.order-lg-5
-
.order-xl-0
-
.order-xl-1
-
.order-xl-2
-
.order-xl-3
-
.order-xl-4
-
.order-xl-5
-
.order-xxl-0
-
.order-xxl-1
-
.order-xxl-2
-
.order-xxl-3
-
.order-xxl-4
-
.order-xxl-5
In addition, there are also classes called .order-first and .order-last that are responsive and modify the sequence of an element by assigning it an order of -1 and 6, respectively.
-
.order-first
-
.order-last
-
.order-sm-first
-
.order-sm-last
-
.order-md-first
-
.order-md-last
-
.order-lg-first
-
.order-lg-last
-
.order-xl-first
-
.order-xl-last
-
.order-xxl-first
-
.order-xxl-last
Align content
In order to align flex items of a flexbox container together on the cross axis, use the utility .align-content. Following are the options available:
-
start (default)
-
end
-
center
-
between
-
around
-
stretch
We have enabled the flex-wrap: wrap property and added more flex items to showcase the functionality of these utilities.
Let us see an example for the .align-content-* classes:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h4>Flex utilities - align content</h4>
<!--align-content-start-->
<div class="d-flex flex-column bd-highlight text-bg-info mb-3 flex-wrap align-content-start">
<div class="border p-2 bd-highlight">
Flex item 1
</div>
<div class="border p-2 bd-highlight">
Flex item 2
</div>
<div class="border p-2 bd-highlight">
Flex item 3
</div>
</div>
<!--align-content-center-->
<div class="d-flex flex-column bd-highlight text-bg-warning mb-3 flex-wrap align-content-center">
<div class="border p-2 bd-highlight">
Flex item 1
</div>
<div class="border p-2 bd-highlight">
Flex item 2
</div>
<div class="border p-2 bd-highlight">
Flex item 3
</div>
</div>
<!--align-content-end-->
<div class="d-flex flex-column bd-highlight text-bg-danger mb-3 flex-wrap align-content-end">
<div class="border p-2 bd-highlight">
Flex item 1
</div>
<div class="border p-2 bd-highlight">
Flex item 2
</div>
<div class="border p-2 bd-highlight">
Flex item 3
</div>
</div>
<!--align-content-stretch-->
<div class="d-flex flex-column bd-highlight text-bg-primary mb-3 flex-wrap align-content-stretch">
<div class="border p-2 bd-highlight">
Flex item 1
</div>
<div class="border p-2 bd-highlight">
Flex item 2
</div>
<div class="border p-2 bd-highlight">
Flex item 3
</div>
</div>
</div>
</body>
</html>
Variations that adapt to different screen sizes are also available for the class .align-content:
-
.align-content-start
-
.align-content-end
-
.align-content-center
-
.align-content-between
-
.align-content-around
-
.align-content-stretch
-
.align-content-sm-start
-
.align-content-sm-end
-
.align-content-sm-center
-
.align-content-sm-between
-
.align-content-sm-around
-
.align-content-sm-stretch
-
.align-content-md-start
-
.align-content-md-end
-
.align-content-md-center
-
.align-content-md-between
-
.align-content-md-around
-
.align-content-md-stretch
-
.align-content-lg-start
-
.align-content-lg-end
-
.align-content-lg-center
-
.align-content-lg-between
-
.align-content-lg-around
-
.align-content-lg-stretch
-
.align-content-xl-start
-
.align-content-xl-end
-
.align-content-xl-center
-
.align-content-xl-between
-
.align-content-xl-around
-
.align-content-xl-stretch
-
.align-content-xxl-start
-
.align-content-xxl-end
-
.align-content-xxl-center
-
.align-content-xxl-between
-
.align-content-xxl-around
-
.align-content-xxl-stretch
Media object
You can recreate the media object component easily and quickly by using a few flex utilities that provide more flexibility and options than before.
Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h4>Flex utilities - Media object</h4>
</div>
<div class="d-flex align-items-center border mx-4 w-50 mt-3">
<div class="flex-md-shrink-0">
<img src="https://i1.wp.com/simplesnippets.tech/wp-content/uploads/2018/07/tutorialspoint.jpg?resize=500%2C500&ssl=1">
</div>
<div class="flex-md-grow-1">
Content related to the image is placed at the center of the image, as we have used the class .align-items-center. The image is the logo of "Tutorials Point".
</div>
</div>
</body>
</html>
”;