I have tested this item ? unsuccessfully on 48a2894

It's the same as before

And please change your branch to something other, not 4.0-dev

The problem is caused by

@media (max-width: 767.98px)
.btn {
    margin-bottom: .25rem;
}

Sorry, it's by mistake approved and I didn't revert it.
So, please don't consider these changes approved

I followed the GSOC guidelines to change the branch to 4.0-dev, so which branch should I choose?

I followed the GSOC guidelines to change the branch to 4.0-dev, so which branch should I choose?

@deveshprasad The branch is ok. It would have been better if you had created a new, extra branch for this PR based on the 4.0-dev branch, but as long as you don't make other PR's for other issues, it works like now, using your 4.0-dev branch.

Later when this PR is ok and tested and merged, the best is you delete your 4.0-dev branch and create it again based on the 4.0-dev branch of the CMS. Otherwise, if you don't do that and later create another PR based on your 4.0-dev branch which still contains your changes from this PR here, the other, future PR will be wrong.

But for now that should not be a problem.

Here you should change margin-bottom to 0

Here you should change margin-bottom to 0

1. If the intent is to remove the margin-bottom at that size then you should just remove the entire class not set it to 0
2. Whenever you remove something you should see why it was there in the first place. Everything has a purpose so you wouldnt want to break that with a change

The PR that introduced that code was #32697

I have tested this item ? unsuccessfully on 48a2894

Breaks all buttons see comments

Then it can be corrected by add mb-0 to it's markup.
That's in password. php file.

That would set a margin bottom at all screen sizes. Is that what you want to do?

So if the bootstrap margin is not the correct way and we should remove the entire class, and should directly set it to 0.
I tried applying bootstrap margin individually ( .btn) so that it won't affect the other buttons. But this is still not the correct way,
so can we add a new class on this button and which has its margin in the CSS files equal to 0?

I have a similar issue which I solved with help of bootstrap, but if m-1 is not the correct way as it works on all responsive screens
then can I add a new class because removing the current one will remove all those styling related with that class.

Similar issue:

Same issue at the change password page in the frontend.

If we add mb-0 to this line then both problem will be solved, It's not affecting other screen sizes

Similar issue on mobile view .
If we want to target one particular screen without affecting other screen size, and by using bootstrap we can use
mb-md-0 for the previous issue and mt-md-1 for this issue ?