Bootstrap 5 Flex Justify Content
Bootstrap 5 Flex Justify content is used to change the alignment of flex items on the main axis. Using the justify-content, classes we can align the contents along the main axis by distributing the extra space as intended. we can also adjust the alignment of the flex items.
Bootstrap 5 Flex Justify Content Classes:
- justify-content-start: This class is used to align the items to the start of the main axis for all screen sizes.
- justify-content-end: This class is used to align the items to the end of the main axis for all screen sizes.
- justify-content-center: This class is used to align the items to the center of the main axis for all screen sizes.
- justify-content-between: This class is used to align the items to the between of the main axis for all screen sizes.
- justify-content-around: This class is used to align the items around the main axis for all screen sizes.
- justify-content-evenly: This class is used to align the items evenly on the main axis for all screen sizes.
Syntax: The * can be replaceable with start, end, center, between, around and evenly.
<div class="d-flex justify-content-*">
...
</div>
Example 1: In this example, we change the alignment of the elements on the main axis using justify-content-start and justify-content-end classes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body >
< div class = "container text-center " >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h5 >Bootstrap 5 Flex Justify content </ h5 >
</ div >
< div class="d-flex
justify-content-start
flex-row border">
< div class = "border p-2 bg-light" >
Flex item1
</ div >
< div class = "border p-2 bg-light" >
Flex item2
</ div >
< div class = "border p-2 bg-light" >
Flex item3
</ div >
</ div >
< div class="d-flex
justify-content-end
flex-row border ">
< div class = "border p-2 bg-light" >
Flex item1
</ div >
< div class = "border p-2 bg-light" >
Flex item2
</ div >
< div class = "border p-2 bg-light" >
Flex item3
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Flex Justify content
Example 2: In this example, we change the alignment of the elements on the main axis using justify-content-center and justify-content-end classes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body >
< div class = "container text-center " >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h5 >Bootstrap 5 Flex Justify content </ h5 >
</ div >
< div class="d-flex
justify-content-center
flex-row border">
< div class = "border p-2 bg-light" >
Flex item1
</ div >
< div class = "border p-2 bg-light" >
Flex item2
</ div >
< div class = "border p-2 bg-light" >
Flex item3
</ div >
</ div >
< div class="d-flex
justify-content-between
flex-row border">
< div class = "border p-2 bg-light" >
Flex item1
</ div >
< div class = "border p-2 bg-light" >
Flex item2
</ div >
< div class = "border p-2 bg-light" >
Flex item3
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Flex Justify content
Reference: https://getbootstrap.com/docs/5.0/utilities/flex/#justify-content
Last Updated :
15 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...