Something wonderful is gonna happen!
Intro Root Texts Colors Layout Containers

#Sizing elements

Redimensioning the height and width of the elements


The be-width-* class allows to horizontally dimension almost any element.This is useful for defining the size of a container, card, or div. However, measurements range from 5 to 50em. In other cases it will be necessary to use a variable directly in the html.

I have 20em width
<div class="be-width-20">I have 20em width</div>
<!-- Each number represents its value in em -->

Overriding width

You can use the be-widht class to override the value of your variable. You can specify the type of measurements you want, can be in px, em, rem, etc.

<div class="be-width" style="--width: 23em;">I have 23em width</div>
I have 23em width
/* Height sizes
Eacht number represent an "em" measure */

For other measurements it will be necessary to use a variable in the html.

I have 7em height
<div class="be-height-7">
I have 7em height</div>

be-width + be-height: overriding

When not accompanied by a value, the be-height and be-width classes contain the --height and --width variables respectively. These variables allow you to override the value to customize it directly in the html. Obviously, if the desired values are among the defaults, both classes can be used as usual.

height 11em, size 22em
<div class="be-height be-width" style="--width: 22em; --height: 11em;">
height 11em, size 22em </div>


<!-- add padding 
    from 1em to 3em
    in all sides -->

Div Full height

You can force a div to have a height of 100%. For this you can use the class be-h100.