Bootstrap 5 Flex Direction
Last Updated :
10 Apr, 2024
Bootstrap 5 Flex Direction is set by using the direction utilities for flex items in a flex container.
The default browser setting is for the horizontal direction with the use of the flex-row class. For horizontal direction from the opposite side, the class used is flex-row-reverse. Use flex-column class for vertical direction and flex-column-reverse class for opposite side vertical direction.
Bootstrap 5 Flex Direction Classes:
| Class | Description |
|---|
| flex-row | Sets default browser horizontal direction. |
| flex-row-reverse | Sets horizontal direction from the opposite side. |
| flex-column | Sets vertical direction. |
| flex-column-reverse | Sets vertical direction from the opposite side. |
| flex-*-row | Sets default browser horizontal direction for responsiveness. |
| flex-*-row-reverse | Sets horizontal direction from the opposite side for responsiveness. |
| flex-*-column | Sets vertical direction for responsiveness. |
| flex-*-column-reverse | Sets vertical direction from the opposite side for responsiveness. |
Note: Responsive variants also exist for flex-direction classes, in the above classes, the '*' can be replaced by device breakpoints i.e. sm, md, lg, xl, and xxl.
Syntax: In order to make a flexbox container and convert direct children into flex items, we have to use the d-flex class. This will make our container a flexbox container so we can manipulate the items according to our needs. The '*' can be replaced by device breakpoints such as sm, md, lg, xl, and xxl.
<div class="d-flex Flex Direction Class">
...
</div>Note: You can also create an inline flex container using the class d-inline-flex.
Example 1: If you want your items placed horizontally one after another, then you need to mention the flex-row class. If your items need to be reversely aligned, then you have to mention the flex-row-reverse class.
HTML
<!DOCTYPE html>
<html>
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body class="m-2 text-center">
<strong
>Bootstrap 5 Flex Direction</strong
>
<br />
<strong>Flex Direction: flex-row</strong>
<div
class="d-flex flex-row p-3
bg-success
text-success"
>
<div
class="p-2 bg-light
border border-dark"
>
Flex item 1
</div>
<div
class="p-2 bg-light
border border-dark"
>
Flex item 2
</div>
<div
class="p-2 bg-light
border border-dark"
>
Flex item 3
</div>
</div>
<br />
<strong
>Flex Direction:
flex-row-reverse</strong
>
<div
class="d-flex flex-row-reverse
p-3 bg-success
text-success"
>
<div
class="p-2 bg-light border
border-dark"
>
Flex item 1
</div>
<div
class="p-2 bg-light border
border-dark"
>
Flex item 2
</div>
<div
class="p-2 bg-light
border
border-dark"
>
Flex item 3
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Flex Direction Example output
Example 2: When you want your items to be placed in stacked order, you can use the flex-column class. If you want to stack in opposite/reverse order, use the flex-column-reverse class.
HTML
<!DOCTYPE html>
<html>
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>GeeksForGeeks</title>
</head>
<body class="m-2 text-center">
<strong
>Bootstrap 5 Flex Direction</strong
>
<br />
<strong>Flex Direction: flex-col</strong>
<div
class="d-flex flex-column
p-3 bg-success
text-success"
>
<div
class="p-2 bg-light
border
border-dark"
>
Flex item 1
</div>
<div
class="p-2 bg-light
border border-dark"
>
Flex item 2
</div>
</div>
<br />
<strong
>Flex Direction:
flex-col-reverse</strong
>
<div
class="d-flex flex-column-reverse
p-3 bg-success text-success"
>
<div
class="p-2 bg-light
border border-dark"
>
Flex item 1
</div>
<div
class="p-2 bg-light
border border-dark"
>
Flex item 2
</div>
</div>
<br />
</body>
</html>
Output:
Bootstrap 5 Flex Direction Example Output
Similar Reads
Bootstrap 5 Flex Fill Bootstrap 5 Flex fill can be used to force the flex items to take the width according to their content. If the content of any sibling element does not exceed its border, all the flex items with flex fill classes will take up equal widths. Bootstrap 5 Flex Fill Classes:flex-fill: This class is used o
2 min read
Bootstrap 5 Popovers Four directions The popover is a bootstrap component used to mainly add additional information to a website. It is a pop-up box that appears when the user clicks on an element. Using bootstrap attributes, It can be aligned in any of the four directions left, top, right, and bottom. Bootstrap 5 Popovers Four directi
3 min read
Bootstrap 5 Flex Bootstrap 5 Flex offers utility classes for creating flexible layouts using Flexbox, ensuring responsiveness across screen sizes. To start, wrap desired elements in a flex container with classes like .container or .row. Then, use flex utility classes to control item layout. AspectDescriptionFlex Dir
3 min read
Bootstrap 5 Dropdowns Directions Bootstrap 5 Dropdowns Directions are used to change the direction in which we want the dropdown to pop up. The arrow direction is changed based on the direction set for the dropdown to appear. Bootstrap 5 Dropdowns Directions: Dropdown Dropleft: This is used to show dropdown menus left-side of the r
2 min read
Bulma Flex Direction In this article, we'll be seeing flex-direction in Bulma. In Bulma, the flexbox properties are used as helpers. The flex-direction property allows the user to set the direction of items in a flex container with direction utilities, like row, row-reverse, column, column-reverse. Sometimes, the horizo
3 min read
Bootstrap 5 Position Bootstrap 5 Position offers utility classes to control the positioning of elements. It includes classes like "position-static," "position-relative," "position-absolute," etc., facilitating precise element positioning on web pages for improved layout and design control.NameDescriptionposition-staticD
2 min read