Flexbox in Bootstrap 4: From bootstrap 3 to bootstrap 4 amazing change has occurred that bootstrap 4 can utilize flexbox to handle the layout of content. The FlexBox Layout Module makes it easier to design a flexible responsive layout structure.
Approach: Place the direction of flex items in a flex container with direction utilities. In most cases, you will be able to exclude the horizontal class as the browser default is a row. In any case, you will experience circumstances where you required to explicitly set this esteem (like responsive layouts).
The following Examples represent different ways to put items underneath each other in a Flex-Box.
**Example 1: **Use .**flex-column **class to put items underneath each other.
<div class="d-flex flex-column"></div>
- HTML
<!DOCTYPE html>
<``**html** lang``=``"en"``>
<``**head**``>
<!-- Required meta tags -->
<``**meta** charset``=``"utf-8"``>
<``**meta** name``=``"viewport" content=
"``width``=``device``-width, initial-scale``=``1``,
shrink-to-fit``=``no``">
<!-- Bootstrap CSS -->
<``**link** rel``=``"stylesheet" href``=
"[https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"
integrity``=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin``=``"anonymous"``>
</``**head**``>
<``**body**``>
<``**center**``>
<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>
<``**div** class``=``"d-flex flex-column bd-highlight mb-3"``>
<``**div** class``=``"p-2 bd-highlight"``>Content 1</``**div**``>
<``**div** class``=``"p-2 bd-highlight"``>Content 2</``**div**``>
<``**div** class``=``"p-2 bd-highlight"``>Content 3</``**div**``>
</``**div**``>
</``**center**``>
</``**body**``>
</``**html**``>
Output:
**Example 2: **You can also use the .flex-column-reverse class to put items underneath each other in reverse order. Displaying flex-box in reverse order.
- HTML
<!DOCTYPE html>
<``**html** lang``=``"en"``>
<``**head**``>
<!-- Required meta tags -->
<``**meta** charset``=``"utf-8"``>
<``**meta** name``=``"viewport" content="``width``=``device``-width,
initial-scale``=``1``, shrink-to-fit``=``no``">
<!-- Bootstrap CSS -->
<``**link** rel``=``"stylesheet" href``=
"[https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"
integrity``=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin``=``"anonymous"``>
<``**title**``>flexbox | bootstrap4</``**title**``>
</``**head**``>
<``**body**``>
<``**center**``>
<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>
<``**div** class``=``"d-flex flex-column-reverse bd-highlight mb-3"``>
<``**div** class``=``"p-2 bd-highlight"``>Content 1</``**div**``>
<``**div** class``=``"p-2 bd-highlight"``>Content 2</``**div**``>
<``**div** class``=``"p-2 bd-highlight"``>Content 3</``**div**``>
</``**div**``>
</``**center**``>
</``**body**``>
</``**html**``>
Output:
**Example 3: By using flex-direction: column; and align-items: center; **you can place items underneath each other in the center. Thus, as shown below, we can place icons or images underneath each other using flexbox in bootstrap 4.
- HTML
<!DOCTYPE html>
<``**html** lang``=``"en"``>
<``**head**``>
<!-- Required meta tags -->
<``**meta** charset``=``"utf-8"``>
<``**meta** name``=``"viewport" content="``width``=``device``-width,
initial-scale``=``1``, shrink-to-fit``=``no``">
<!-- Bootstrap CSS -->
<``**link** rel``=``"stylesheet" href``=
"[https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"
integrity``=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin``=``"anonymous"``>
<``**script** src``=``"[https://kit.fontawesome.com/577845f6a5.js](https://kit.fontawesome.com/577845f6a5.js)"
crossorigin``=``"anonymous"``>
</``**script**``>
<``**title**``>flexbox | bootstrap4</``**title**``>
<``**style** type``=``"text/css"``>
.my_content {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.my_options {
border: 1px solid green;
display: flex;
align-items: center;
justify-content: center;
}
</``**style**``>
</``**head**``>
<``**body**``>
<``**center**``>
<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>
</``**center**``>
<``**div** class``=``"my_content"``>
<``**div** class``=``"my_options col-xs-6"``>
<``**div**``><``**i** class``=``"fa fa-hand-o-down fa-2x"
aria-hidden``=``"true"``></``**i**``></``**div**``>
<``**h3**``> fa-hand-o-down</``**h3**``>
</``**div**``>
<``**div** class``=``"my_options col-xs-6"``>
<``**div**``><``**i** class``=``"fa fa-hand-o-left fa-2x"
aria-hidden``=``"true"``></``**i**``></``**div**``>
<``**h3**``> fa-hand-o-left</``**h3**``>
</``**div**``>
<``**div** class``=``"my_options col-xs-6"``>
<``**div**``><``**i** class``=``"fa fa-hand-o-right fa-2x"
aria-hidden``=``"true"``></``**i**``></``**div**``>
<``**h3**``> fa-hand-o-right</``**h3**``>
</``**div**``>
<``**div** class``=``"my_options col-xs-6"``>
<``**div**``><``**i** class``=``"fa fa-hand-o-up fa-2x"
aria-hidden``=``"true"``></``**i**``></``**div**``>
<``**h3**``> fa-hand-o-up</``**h3**``>
</``**div**``>
</``**div**``>
</``**body**``>
</``**html**``>
#bootstrap #web technologies #web technologies questions #bootstrap-4 #bootstrap-misc #picked
