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 > <!-- 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" >w3wiki</ 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" >w3wiki</ 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" >w3wiki</ 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:
Contact Us