Margin and padding utilities beyond Bootstrap's defaults.

:choco-info: Reference Bootstrap

Choco-theme respects all Bootstrap Spacing documentation.

Notation

Choco-theme supports Bootstraps's documented notation for default values (1-5), however it has been extended to include additional properties and flagged by an extra c in the class name. This is due to choco-theme's spacing size guide follows direct numbers and not the notation by the default classes. For example, a default (and supported) class might be mt-2, but choco-theme extend it to add classes such as mt-c2, where the 2 would equal 2rem instead of the default 1.5rem. See below for all available custom values.

Add to the map below to generate additional space classes. This map is found in choco-theme/scss/variables/_global.scss.

$spaces: (
    "45":     .45,
    "75":     .75,
    "1-25":   1.25,
    "1-75":   1.75,
    "2":      2,
    "2-25":   2.25,
    "2-75":   2.75,
    "3-75":   3.75,
    "4":      4,
    "4-5":    4.5,
    "4-75":   4.75,
    "5":      5,
    "6":      6,
    "7":      7,
);

By default, the values result to rem, however, they can also be used with px by added a -px to the class name. For example, mt-c2-px would equal to 2px instead of 2rem.

Examples

.mt-c45 {
    margin-top: .45rem;
}

.ms-7-px {
    margin-left: 7px;
}

.mt-nc3 {
    margin-top: -3rem;
}

.pb-c4-75 {
    padding-bottom: 4.75rem;
}