Easily make an element as wide or as tall with our width and height utilities.
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.
<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>
<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.
<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>
<template>
<b-div style="height: 100px">
<b-div
max-height
style="
width: 100px;
height: 200px;
"
>
Max-height 100%
</b-div>
</b-div>
</template>
You can also use utilities to set the width and height relative to the viewport.