Bootstrap 5 full viewport

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.

 <link href="" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

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


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




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

Thanks, I am using the default template from 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">


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

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

Thanks a lot. Working great :trophy:

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