When Bootstrap displays a modal, it adds overflow: hidden to the body to prevent scrolling of the body's content. If the modal content is larger than the window, a scrollbar will appear and allow scrolling within the modal (or you can choose to have a scrollbar within the modal).
You mentioned your header and background as "shifting," but details about these elements were not provided. If the header or background has position: fixed and a width of 100%, it will fill the width without generating scrollbars.
Bootstrap prevents the expansion of body and navbar content by adding padding equal to the scrollbar width (e.g. 17px for Firefox, 15px for Edge). Fixed position content also requires this additional padding while the modal is open.
To address this, add the class .is-fixed to the shifting element. This class triggers Bootstrap to apply (and remove) padding to any elements with classes .fixed-top, .fixed-bottom, .is-fixed, or .sticky-top. The .is-fixed class does not have any predefined styles - it is solely used by Bootstrap's JavaScript to identify elements requiring padding when a modal is active.
Below are two code snippets to illustrate the difference: the first snippet lacks the .is-fixed class on the image, causing it to expand into the scrollbar space, while the second snippet includes the .is-fixed class, preventing the image from expanding.
Snippet where the image expands:
.btn-modal {
margin-top: 4.5rem;
}
section {
position: relative;
height: 150vh;
}
img {
width: 100%;
position: fixed;
}
<!-- Code for modal and navbar structure goes here -->
Snippet where the image does not expand:
.btn-modal {
margin-top: 4.5rem;
}
section {
position: relative;
height: 150vh;
}
img {
width: 100%;
position: fixed;
}
<!-- Code for modal and navbar structure goes here -->
The image used in the examples is sourced from and is licensed under Creative Commons, with credits to the image title and owner provided.