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.
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.
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
In the same way for mid-level devices, we can add MD in the class (
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.