Understanding 100vh in Bootstrap 5
When working with Bootstrap 5, you may have encountered the term "100vh" in various documentation and examples. But what does it mean, and how does it impact your web development projects?
What is 100vh?
100vh is a CSS unit that stands for "100 viewport height." It's a relative unit that represents the height of the viewport, which is the visible area of the web page. In other words, 100vh is equivalent to the full height of the browser window.
How does it work in Bootstrap 5?
In Bootstrap 5, 100vh is used to set the height of an element to the full height of the viewport. This can be useful for creating full-screen backgrounds, hero sections, or other elements that need to occupy the entire height of the screen.
To use 100vh in Bootstrap 5, you can add the h-100 class to an element, like this:
This will set the height of the element to 100% of the viewport height, making it full-screen.
Advantages of using 100vh
- Responsive design:
100vhis a responsive unit, which means it adapts to different screen sizes and devices. This makes it ideal for creating responsive web designs. - Easy to use: Adding the
h-100class is a simple way to make an element full-screen, without having to write custom CSS code. - Flexibility:
100vhcan be used in conjunction with other Bootstrap classes, such asw-100to create full-screen elements with custom widths.
Common use cases for 100vh
- Hero sections: Use
100vhto create full-screen hero sections with background images or videos. - Full-screen modals: Add
h-100to a modal container to make it full-screen. - Background images: Use
100vhto set the height of a background image to the full height of the viewport.
Conclusion
In conclusion, 100vh is a powerful CSS unit that can be used to create full-screen elements in Bootstrap 5. By adding the h-100 class to an element, you can easily set its height to the full height of the viewport, making it ideal for various web development projects.
