How to put items underneath each other flex box in Bootstrap 4 ? - GeeksforGeeks

27 Jul, 2020
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"    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"    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"    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"    crossorigin="anonymous">    <script src="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>
Output:
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?