Скачать или смотреть How to Make a Bootstrap Row Span the Entire Viewport Height Using height: 100vh

Discover how to expand a Bootstrap row to cover the entire viewport height with simple CSS adjustments. Uncover solutions to ensure your web layout is visually appealing.
---
This video is based on the question https://stackoverflow.com/q/62827018/ asked by the user 'Ryan Thom' ( https://stackoverflow.com/u/12860101/ ) and on the answer https://stackoverflow.com/a/62827046/ provided by the user 'Symphonic' ( https://stackoverflow.com/u/11003545/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How do I make a bootstrap row the length of my viewport?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Make a Bootstrap Row Span the Entire Viewport Height

If you're working on a Bootstrap layout and have run into the issue where a row only extends as far as the content inside it, you're not alone. This can often lead to a visually unbalanced design, especially if you desire the row to occupy the full height of the viewport. In this post, we will explore how to solve this problem effectively using a simple CSS solution.

The Problem: Limited Row Height

In Bootstrap, a row's height is automatically determined by the content it contains. This means:

If your content is short, the row is short.

If your content is lengthy, the row expands accordingly.

However, in certain design scenarios, such as hero sections or specific layout needs, a row must span the entire height of the viewport. The default behavior is not conducive to achieving this, and it leaves a gap if your content does not fill the screen.

Example Scenario

Consider the following HTML setup:

[[See Video to Reveal this Text or Code Snippet]]

With this setup, if the <div class="col-sm-10"> contains only a small amount of text, the row will not extend to fill the entire viewport, leading to an undesired visual outcome.

The Solution: Setting the Row Height to 100vh

To ensure that your Bootstrap row spans the entire viewport height, you can leverage the CSS property height: 100vh;. This property sets the height of the element to 100% of the viewport height, ensuring your row covers the entire visible area of the browser window.

Step-by-Step Implementation

Modify Your CSS: Add the following CSS rule to your stylesheet or in a <style> tag within your HTML.

[[See Video to Reveal this Text or Code Snippet]]

Apply the Class to Your Row: Add the new class to your Bootstrap row in the HTML code.

[[See Video to Reveal this Text or Code Snippet]]

Final Result

With these adjustments, your Bootstrap row will now extend to fill the entire height of the viewport, creating a balanced and visually appealing layout. This method is especially useful for landing pages or sections that need to stand out.

Conclusion

Incorporating CSS properties effectively can transform the way your Bootstrap layout behaves. By setting the row's height to 100vh, you can ensure it fills the viewport, creating a more cohesive experience for your users. Don't hesitate to experiment with these styles in your projects and observe the impact on your overall design!