How to use VH and VW viewport units with bootstrap 4

by | Jan 27, 2020 | Bootstrap, Web Design

How to use VH and VW viewport units with bootstrap 4. In this video we will be using the viewport units VW and VH. VW stands for viewable width and VH stands for viewable height. To demonstrate how to use VH and VW viewport units with bootstrap 4, we have loaded up a default bootstrap 4 template into our text editor. If you do not have a text editor you can download a free one from here. It is called brackets, it’s really great and we will be using it for our demonstration.

Once the bootstrap 4 template is in place let’s add some inline CSS to the section. The first thing to be added is a background color – background:blue; we will also use a bootstrap 4 short code to turn the text to a light color so it can be seen on the blue background ‘text-light’. Now that we can see us section let’s use the VH unit to set the height of all section. 1 v h unit is = to 1% of the viewable height of the screen that the site is being viewed on. This is how we build responsive websites that adapt differently to various screen sizes. So if we want to make a blue section take up 75% of the variable height of the screen, we need to enter the code – height:75vh; as you can see from the demonstration a content is now stretched to 75% of the screen height. If you flip over to tablet or mobile view, you can see set the height is also 75% on these devices.

Now that we have set the height of our section we need to align the contents vertically so that they are in the middle of the section. To do this we can add a little mole CSS using the flex system –  display: flex; flex-direction: column; justify-content: center; This will now display the content in the vertical center of all blue section.

Next we want to use the VW unit to set the width of the blue section. To set a section to a width a 50% we need to use the CSS command – width:50vw; this will now set the blue section to be only 50% of the width of our screen. This is fine if you want your section to stay on the left hand side of your screen, that is where it will be by default. I want my section to be in the middle of my screen, so to do that we need to add one more than a line of CSS – margin:auto; this will give our section and = margin left and right, so it will Now display in the center of a screen. VH and VW units a really useful design tools. That is how to use VH and VW viewport units with your bootstrap website.

For our readers, get any of the below courses for just $9.99 each. Just contact me with the course name and I’ll email you the discount coupon.

Subscribe To Our Newsletter

Join the System 22 mailing list to receive the latest tech tips, deals and updates from our team.

We will never spam or share your email!

You have Successfully Subscribed!

Pin It on Pinterest

Share This