"ml-auto"(margin-left) in Bootstrap-5 not working:

The latest stable version of Bootstrap was released on  5th May 2021. Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites.

Now, let's move towards our problem:

Using Bootstrap say if we build Navigation-Bar as shown in the image below:

Here in the given image, we can see that the "Home/Blog"...... these links are aligned in the left of the navigation bar. So, if we want to align them to right we have to use the "ml-auto" class in the parent so that we can align them to right. The class is highlighted in red in the image given below:

But in some cases, this class does not work and does not align the element to the right. So we have found the solution to this problem.

Simply we have to add "justify-content-end" to the parent class as shown below:

By adding this class to the parent and when we save the code we see that the element that we wanted to shift has shifted to the right as shown below:

So this is the solution to this problem.

I hope it helped you.

Thank you
Utkarsh Gupta