Margin & Paddings

Ways to manage margin and padding in your project

For margin and padding, Drift Angular utilizes the classes provided by BootStrap. You can use the same class names throughout the project.

To change the values of spacing for these margin and padding, you can change the values for $spacer in src / scss / layouts / {layout} / themes / {theme} / _variables.scss as mentioned below:

src / scss / layouts / {layout} / themes / {theme} / _variables.scss

$spacer: 1.6rem;
$spacers: ();
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge((
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: ($spacer * .75),
    4: $spacer,
    5: ($spacer * 1.25),
    6: ($spacer * 1.5),
    7: ($spacer * 1.75),
    8: ($spacer * 2),
    9: ($spacer * 2.25),
    10: ($spacer * 2.5)
), $spacers);

You can add extra classes here by extending this array. Or there is another place where you can add more classes and that is src / scss / core/ globals / _margin.scss or can create your own custom file and import that.