With the additional classes
height-* fullscreen elements can be created, even if the content is inside the
The content of this page is inside the
container. Add the class
width-100 and the element is stretched across the entire width of the screen.
<div class="width-100 bg-danger text-white"> Content </div>
Wrap the content in a
container again and you will have a container section with colored background across the entire width of the screen.
<div class="width-100 py-5 bg-danger text-white"> <div class="container"> Content </div> </div>
height: 100vh; is used to set elements 100% of the window height.
These cause problems on mobile browsers. When scrolling down, the browser header shrinks and the footer hides. The inner window becomes larger and the
vh starts resizing. The result is an unpleasant and ugly “jump” effect on mobile browsers.
height-50, 50% window height
height-75, 75% window height
height-85, 85% window height
height-100, 100% window height
The disadvantages are:
- The heights do not resize when resizing the browser window. When turning a tablet from portrait to landscape mode, the page must be reloaded to fit the heights.
- The heights are calculated on the start screen. If a
height-100class is used, the height is 100% of the visible window. When scrolling down on mobile browsers, the element is no longer 100% high. Because the visible area becomes higher than the original 100%, but the element does not resize to it.
Using height-* classes
<div class="height-50 bg-danger text-white"> height-50 </div>
Using both classes to create fullscreen elements
<div class="height-100 width-100 py-5 bg-danger text-white"> <div class="container h-100 d-flex align-items-center justify-content-center"> Fullscreen div using width-100 and height-100 </div> </div>