Ideas - -Full Stack MERN Web Development
Width and Height Utilities
Width and Height sizing utilities. More information can be found here.
In some examples below, we change the background color to highlight some of the different
text
components. Background colors are covered more specifically in a later lesson..
Width Utilities
Width percent can be set using w and setting the width percentage. This is the percent of width based on the parent element.
*note: you do not use the percent sign %, just the number.
Because Bootstrap width and height is based on the parent size, if we change the size of the parent container, in this case a < div>, then the children will resize accordingly.
Lets change the parent width to 900px.
Remember, Bootstrap width and height is based on the parent size, if we change the size of the parent container, in this case a < div>, then the children will resize accordingly.
In the following, we'll set the parent height to 500px. We'll also make the elements display "inline by using the bootstrap class="d-inline-block".
Height Utilities
Viewport Relative Sizes
We can replace width and height with vw (viewport width) and vh (viewport height).
What this means is the viewable area of the screen.
We set either min-vw or vw to set the minimum or maximum width of the view area,
likewise,
we can set either min-vh or vh to set the minimum and maximum height of the view area.