How to fix Bootstrap modal background scroll to top and content is moved to left

How to fix Bootstrap modal background scroll to top and content is moved to left
Reading Time: < 1 minute

In bootstrap, we have seen this issue that when we click on the modal button then bootstrap modal background scroll to top and content is moved to the left. I have tried many ways to solve this. I am sharing the best and short way to fix this issue.

Bootstrap modal background scroll to top

When the bootstrap modal opens then .modal-open class is set to body tag. In this tag overflow:hidden is set. we have to change this. Add the below code in your CSS.

Bootstrap modal content is moved to left

To solve this issue copy the below code and add this in your css file.

Note :-  If Bootstrap modal appears under background

The cause of this problem is if modal container or parent element has relative position or fixed position then bootstrap modal will appear under background. Always try to avoid this situation and place the modal before body tag or in the end of closing body tag. This will help you in getting trouble. I have spend 2 hours on this problem and found the solution. I hope this may help you. Please let me know in comments if you get any other issue with modal.

One Comment on “How to fix Bootstrap modal background scroll to top and content is moved to left”

Leave a Reply

Your email address will not be published. Required fields are marked *