How to use justify-content Classes in Bootstrap 5?

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.