How to put items underneath each other flex box in Bootstrap 4 ?
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 >
< meta charset = "utf-8" >
< meta name = "viewport" content=
" width = device -width, initial-scale = 1 ,
shrink-to-fit = no ">
< link rel = "stylesheet" href =
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 >
< meta charset = "utf-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 , shrink-to-fit = no ">
< link rel = "stylesheet" href =
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 >
< meta charset = "utf-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 , shrink-to-fit = no ">
< link rel = "stylesheet" href =
integrity =
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin = "anonymous" >
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:
Last Updated :
27 Jul, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...