Relative to the parent
Width and height utilities are generated from the utility API in _utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
vue
<template>
<b-div
relative-width="25"
padding="3"
>
Width 25%
</b-div>
<b-div
relative-width="50"
padding="3"
>
Width 50%
</b-div>
<b-div
relative-width="75"
padding="3"
>
Width 75%
</b-div>
<b-div
relative-width="100"
padding="3"
>
Width 100%
</b-div>
<b-div
relative-width="auto"
padding="3"
>
Width auto
</b-div>
</template>
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
vue
<template>
<b-div style="height: 100px;">
<b-div
relative-height="25"
display="inline-block"
style="width: 120px;"
>
Height 25%
</b-div>
<b-div
relative-height="50"
display="inline-block"
style="width: 120px;"
>
Height 50%
</b-div>
<b-div
relative-height="75"
display="inline-block"
style="width: 120px;"
>
Height 75%
</b-div>
<b-div
relative-height="100"
display="inline-block"
style="width: 120px;"
>
Height 100%
</b-div>
<b-div
relative-height="auto"
display="inline-block"
style="width: 120px;"
>
Height auto
</b-div>
</b-div>
</template>
You can also use max-width: 100%; and max-height: 100%; utilities as needed.
vue
<template>
<b-div flex>
<b-img
src="https://dummyimage.com/200x200/868e96/ffffff&text=Max%20width%20100%25"
rounded
float="start"
alt="200x200"
max-width
/>
</b-div>
</template>
Max-height 100%
vue
<template>
<b-div style="height: 100px">
<b-div
max-height
style="
width: 100px;
height: 200px;
"
>
Max-height 100%
</b-div>
</b-div>
</template>
Relative to the viewport
You can also use utilities to set the width and height relative to the viewport.
vue
<template>
<b-div min-viewport-width>
Min-width 100vw
</b-div>
<b-div min-viewport-height>
Min-height 100vh
</b-div>
<b-div viewport-width>
Width 100vw
</b-div>
<b-div viewport-height>
Height 100vh
</b-div>
</template>