#Sizing elements

Redimensioning the height and width of the elements

be-width

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.

<div class="be-width-20">I have 20em width</div>

<!-- Each number represents its value in em -->
.be-width-5 
.be-width-10
.be-width-15
.be-width-20
.be-width-30
.be-width-40
.be-width-50
.be-width-full

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>

/* Height sizes
Eacht number represent an "em" measure */
.be-height-5
.be-height-6
.be-height-7
.be-height-8
.be-height-9
.be-height-10

<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.

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

Padding

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

Div Full height

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