Sizing

Sizing

Height and width utilities beyond Bootstrap's defaults.

:choco-info: Reference Bootstrap

Choco-theme respects all Bootstrap Sizing documentation.

Extended Sizing

Add to the list below to generate additional height and width classes. This list is found in choco-theme/scss/variables/_global.scss.

$general-numbers: 5, 10, 20, 30, 35, 40, 50, 60, 65, 70, 75, 80, 90, 100, 125, 130, 200, 250, 300, 400, 500;

By default, the values result to %, however, they can also be used with px by added a -px to the class name.

Examples

.h-200 {
    height: 200%;
}

.h-px-200 {
    height: 200px;
}

.min-w-40 {
    min-width: 40%;
}