Bootstrap 5 full viewport

HTML-CSS
1

When I try to get a full viewport view using the following code, I get a horizontal scroll bar. It would be nice to know what is wrong. Thanks.

 
 <html>
 
 <head>
 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

 
 </head>
 
 <body>
 
  <div class="vw-100 vh-100">

</div>

 <div class="vw-100 vh-100">

</div>

</body>


</html>
2

Try using the most common viewport meta tag.

I put the search term in italics for you.

If you need to peek;

<meta name="viewport" content="width=device-width, initial-scale=1">

1 Like
3

Thanks, I am using the default template from getbootstrap.com and it comes with the above line. Regret not adding that here. I still get this horizontal bar extension.

It goes away when I use


<div class="container-fluid px-0 overflow-hidden">

</div>

But I wonder what is causing the horizontal scroll bar when using the original code.

4

It’s the class vw-100, use w-100 instead. The latter means a width of 100%, the former is the full window width plus the vertical scrollbar at the right side of the window. That adds about 15 - 20px to the page’s width (I think on Chrome it’s 17).

On pages that are “short” (have less height than 100vh), so you have no vertical scrollbar, 100vw and 100% are the same, and your horizontal scrollbar disappears.

1 Like
5

Thanks a lot. Working great :trophy:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.