Bootstrap 4 | Flex
Last Updated :
03 Feb, 2023
The flex classes are used to control the layout of flexbox components.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >Flex</ h2 >
< div class = "d-flex bg-success p-3 text-white" >
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Inline Flexbox Container: The .d-inline-flex class is used to create an inline flexbox container.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >Inline Flexbox</ h2 >
< div class = "d-inline-flex bg-success p-3 text-white" >
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Horizontal Direction: The .flex-row class is used to display the flex items horizontally. By default the flexbox are placed horizontally. The .flex-row-reverse class is used to reverse the align of flexbox (right-align flexbox).
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >Horizontal Flexbox</ h2 >
< h3 >flex-row class</ h3 >
< div class = "d-flex flex-row bg-success mb-3 text-white" >
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div > < br >
< h3 >flex-row-reverse class</ h3 >
< div class="d-flex flex-row-reverse
bg-success mb-3 text-white">
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Vertical Direction: The .flex-column class is used to display the flexbox vertically (stack to each other). The .flex-column-reverse class is used to put the flexbox vertically in reverse direction.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >Vertical Flexbox</ h2 >
< h3 >flex-column class</ h3 >
< div class = "d-flex flex-column text-white" >
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div > < br >
< h3 >flex-column-reverse class</ h3 >
< div class = "d-flex flex-column-reverse text-white" >
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Justify Content: The .justify-content-* classes are used to change the alignment of flexbox. The alignment of flexbox can be start, end, center, between and around.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >
Justify Content Flexbox
</ h2 >
< h5 >justify-content-start class</ h5 >
< div class="d-flex justify-content-start
bg-success mb-3 text-white">
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div >
< h5 >justify-content-center class</ h5 >
< div class="d-flex justify-content-center
bg-success mb-3 text-white">
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div >
< h5 >justify-content-end class</ h5 >
< div class="d-flex justify-content-end
bg-success mb-3 text-white">
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div >
< h5 >justify-content-between class</ h5 >
< div class="d-flex justify-content-between
bg-success mb-3 text-white">
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div >
< h5 >justify-content-around class</ h5 >
< div class="d-flex justify-content-around
bg-success mb-3 text-white">
< div class = "p-2 bg-primary" >Flexbox 1</ div >
< div class = "p-2 bg-secondary " >Flexbox 2</ div >
< div class = "p-2 bg-info" >Flexbox 3</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Fill/Equal Widths: The .flex-fill class is used to force the flex items into equal widths.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >
Fill/Equal Width Flexbox
</ h2 >
< div class = "d-flex mb-3" >
< div class = "p-2 bg-primary flex-fill" >
Flexbox 1
</ div >
< div class = "p-2 bg-secondary flex-fill" >
Flexbox 2
</ div >
< div class = "p-2 bg-info flex-fill" >
Flexbox 3
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Grow: The .flex-grow-1 class is used on flexbox to take the rest of space.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >
Grow Flexbox
</ h2 >
< div class = "d-flex mb-3" >
< div class = "p-2 bg-primary" >
Flexbox 1
</ div >
< div class = "p-2 flex-grow-1 bg-secondary" >
Flexbox 2
</ div >
< div class = "p-2 bg-success" >
Flexbox 3
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Order: The .order class is used to change the order of flexbox. The valid order classes
are from 0 to 12.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >
Order Flexbox
</ h2 >
< div class = "d-flex mb-3" >
< div class = "p-2 bg-primary order-3" >
Flexbox 1
</ div >
< div class = "p-2 bg-secondary order-1" >
Flexbox 2
</ div >
< div class = "p-2 bg-success order-2" >
Flexbox 3
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Auto Margins: The .mr-auto and .ml-auto classes are used to add margins to the item. The .mr-auto class pushes the item to the right and .ml-auto class pushes the item to the left.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >Auto Margins</ h2 >
< div class = "d-flex bg-success mb-3 text-white" >
< div class = "p-2 bg-primary" >
Flexbox 1
</ div >
< div class = "p-2 mr-auto bg-secondary " >
Flexbox 2
</ div >
< div class = "p-2 mr-auto bg-info" >
Flexbox 3
</ div >
</ div >
< div class = "d-flex bg-success mb-3 text-white" >
< div class = "p-2 bg-primary" >
Flexbox 1
</ div >
< div class = "p-2 ml-auto bg-secondary " >
Flexbox 2
</ div >
< div class = "p-2 bg-info" >
Flexbox 3
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Wrap: The .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse classes are used to control the wrap of flex items.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >Flex Wrap</ h2 >
< h4 >flex-nowrap class</ h4 >
< div class = "d-flex flex-nowrap bg-success" >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 2
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 3
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 4
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 5
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 6
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 7
</ div >
</ div >
< br >< br >
< h4 >flex-wrap class</ h4 >
< div class = "d-flex flex-wrap bg-success" >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 2
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 3
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 4
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 5
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 6
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 7
</ div >
</ div >
< br >< br >
< h4 >flex-wrap-reverse class</ h4 >
< div class = "d-flex flex-wrap-reverse bg-success" >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 2
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 3
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 4
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 5
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 6
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 7
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Align Content: The .align-content-* classes are used to set the vertical alignment of flex items. The list of all classes are: .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch.
Note: The align content works for more than one rows of flex items.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >Align Content</ h2 >
< h4 >align-content-start class</ h4 >
< div class="d-flex flex-wrap
align-content-start border"
style = "height:250px" >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 2
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 3
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 4
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 5
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 6
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 7
</ div >
</ div >
< br >
< h4 >align-content-around class</ h4 >
< div class="d-flex flex-wrap
align-content-around border"
style = "height:250px" >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 2
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 3
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 4
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 5
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 6
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 7
</ div >
</ div >
< br >
< h4 >align-content-stretch class</ h4 >
< div class="d-flex flex-wrap
align-content-stretch border"
style = "height:250px" >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 2
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 3
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 4
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 5
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 6
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 7
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Align Items: The .align-items-* classes are used to control the vertical alignment of flex items. The list of all classes are: .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default).
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >Align Items</ h2 >
< h4 >align-items-end class</ h4 >
< div class = "d-flex align-items-end border"
style = "height:150px" >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 2
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 3
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 4
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 5
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 6
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 7
</ div >
</ div >
< br >
< h4 >align-items-baseline class</ h4 >
< div class = "d-flex align-items-baseline border"
style = "height:150px" >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 2
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 3
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 4
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 5
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 6
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 7
</ div >
</ div >
< br >
< h4 >align-items-stretch class</ h4 >
< div class = "d-flex align-items-stretch border"
style = "height:150px" >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 2
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 3
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 4
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 5
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 6
</ div >
< div class = "p-2 border" >
Welcome to GeeksforGeeks 7
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Align Self: The .align-self-* classes are used to control the vertical alignment of flex items. The list of all classes are: .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default).
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Flex</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container mt-3" >
< h1 style = "color:green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center;" >Align Self</ h2 >
< h4 >align-items-end class</ h4 >
< div class = "d-flex" style = "height:250px" >
< div class = "p-2 border align-self-start" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border align-self-center" >
Welcome to GeeksforGeeks 2
</ div >
< div class = "p-2 border align-self-end" >
Welcome to GeeksforGeeks 3
</ div >
< div class = "p-2 border align-self-baseline" >
Welcome to GeeksforGeeks 1
</ div >
< div class = "p-2 border align-self-stretch" >
Welcome to GeeksforGeeks 2
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Share your thoughts in the comments
Please Login to comment...