How to use justify-content Classes in Bootstrap 5?
Last updated on September 13, 2022
Bootstrap is a popular framework for making websites responsive on all devices like mobile, tablets, and desktops. It provides a grid system to design the layout on large medium and small devices. It is a package that has many built-in classes to help developers in developing user interfaces faster. In this article we will learn about bootstrap 5 class that is Justify-content-*.
Every front-end developer who works with bootstrap 5, wants to know how to use the class justify-content-center in bootstrap 5.
The justify-content-* is a prefix of some other classes so we will explain all classes here. To change the alignment of flex-items, you need to use the classes start, end, center, between, and around with the prefix of justify-content-*.
To adjust the alignment of flex items, we can use justify-content-* with the appropriate end part. According to the documentation, we can add the following part which makes the justify-content-* class to function well.
- start
- end
- center
- between
- around
Let’s see how to use the justify-content classes for alignment in bootstrap 5. In the below example, we are using justify-content-* classes with the bootstrap d-flex class which adjusts the div as per their properties.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>1. Class justify-content-start
If you want to align flex items from the start of the main container, you need to use the class justify-content-start in bootstrap 5.
2. Class justify-content-end
In case you need to align flex items from the end of the main container, you need to use the class justify-content-end. If you add a new item to the main container it will align it right, but will not be changing its position.
3. Class justify-content-center
The justify-content-center class aligns all the flex items horizontally centered in the main container.
4. Class justify-content-between
The justify-content-between class adds equal space between the flex items. It aligns the content from the left in the main container.
5. Class justify-content-around
The justify-content-around adds equal space at the start and end. It also adds equal space between the flex items.
Responsive Variations
The justify-content utility in the bootstrap also has responsive variations. For example, if we use the justify-content-center class to centralize the content horizontally in the container. But content should align left on small devices, in this case, we will be using class .justify-content-sm-start.
In the same way for mid-level devices, we can add MD in the class (.justify-content-md-end).
Conclusion
In this article we learned about justify-content utility, which helps us to align flex items in different directions. We also learned how to use the justify-content classes on other large, medium, and small devices.
Related Posts
- 1. CSS Selectors
- 2. How to use Sass Variables?
- 3. How to Create and Use Mixin in the Sass?
- 4. How to Build Responsive Page Using CSS Flexible Box Layout?