Bootstrap 5 Flex Justify Content
Last Updated :
10 Apr, 2024
Bootstrap 5 Flex Justify Content aligns items along the main axis, distributing space between or around them, facilitating flexible layouts and responsive design with various alignment options.
Bootstrap 5 Flex Justify Content Classes:
| Class | Description |
|---|
| justify-content-start | Aligns items to the start of the main axis for all screen sizes. |
| justify-content-end | Aligns items to the end of the main axis for all screen sizes. |
| justify-content-center | Aligns items to the center of the main axis for all screen sizes. |
| justify-content-between | Aligns items between the start and end of the main axis for all screen sizes. |
| justify-content-around | Aligns items evenly spaced around the main axis for all screen sizes. |
| justify-content-evenly | Aligns 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>
Examples of Bootstrap 5 Flex Justify Content
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</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 contentExample 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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</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
Similar Reads
Bootstrap 5 Flex Align Content Bootstrap 5 Flex Align Content provides utilities for aligning flex items along the cross-axis. Options include start, end, center, around, and stretch, accommodating various layout requirements across different screen sizes. Bootstrap 5 Flex Align Content Classes: ClassDescriptionalign-content-star
2 min read
Does Bootstrap 3 used Flexbox ? Bootstrap 3 used floats to handle the layout in place of the flexbox, however, Bootstrap 4 uses flexbox to handle the layout. The flexbox layout makes it easier to design a flexible responsive layout structure without using float or positioning. Therefore, we use Bootstrap 4 in place of Bootstrap 3
3 min read
Bootstrap 5 Flex Direction Bootstrap 5 Flex Direction is set by using the direction utilities for flex items in a flex container. The default browser setting is for the horizontal direction with the use of the flex-row class. For horizontal direction from the opposite side, the class used is flex-row-reverse. Use flex-column
3 min read
Bulma Justify Content Bulma is a modern, free and open-source CSS framework built on flexbox. It comes with pre-styled components and elements that let you create beautiful and responsive websites fast. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement
3 min read
Bootstrap 5 Flex Bootstrap 5 Flex offers utility classes for creating flexible layouts using Flexbox, ensuring responsiveness across screen sizes. To start, wrap desired elements in a flex container with classes like .container or .row. Then, use flex utility classes to control item layout. AspectDescriptionFlex Dir
3 min read
Bootstrap 5 Columns Bootstrap 5 Columns facilitates the different option for the alignment, ordering, and offsetting of the Columns with the help of flexbox grid system. The different available column classes can be utilized to manage widths of non-grid elements. Bootstrap 5 Columns: The following components is used th
2 min read