Bootstrap 4 add more sizes spacing

Question

I'm in the middle of a web project, where spaces between sections have 80px. I would like to create one more option in the bootstrap spacers.

For the moment I have in the sass code:

section {
    padding: 0 80px;
}

Bootstrap spacers range from .25em to 3em (.p-5 = 40px)

I would like to create a .p-6 class containing 5em (80px)

The ideal would be:

<section class="py-5 py-md-6">

A bootstrap I have linked via CDN. I can not imagine how to create this with variables, somehow integrating it into the boostrap css. Could you give me any clues?

Answer 1

If you were using scss, you could simply add another entry to the $spacers variable before compiling bootstrap... so something like

$spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3),
  6: ($spacer * 5)
)

The above taken and modified from https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L100

Since it sounds like you're using CSS only, you could define your own following the pattern they do, so in your own CSS add a set of classes (see below, taken and modified from https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L6937):

.pt-6,
.py-6 {
  padding-top: 5rem !important;
}

.pr-6,
.px-6 {
  padding-right: 5rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 5rem !important;
}

.pl-6,
.px-6 {
  padding-left: 5rem !important;
}

and if you in particular want the medium breakpoint ones, you could do

@media (min-width: 768px) {
    .pt-md-6,
    .py-md-6 {
      padding-top: 5rem !important;
    }

    .pr-md-6,
    .px-md-6 {
      padding-right: 5rem !important;
    }

    .pb-md-6,
    .py-md-6 {
      padding-bottom: 5rem !important;
    }

    .pl-md-6,
    .px-md-6 {
      padding-left: 5rem !important;
    }
}

Answer 2

If you were using scss, thats my very basic extension of spacers (bootstrap 4 - default font-size:16px)

     $spacer: 1rem !default;
     $spacers: () !default;
     // stylelint-disable-next-line scss/dollar-variable-default
     $spacers: map-merge(
       (
         0: 0,
         1: ($spacer * .25),    //4px
         2: ($spacer * .5),     //8px
         3: $spacer,            //16px
         4: ($spacer * 1.5),    //24px
         5: ($spacer * 3),      //48px
         6: ($spacer * 4),      //64px
         7: ($spacer * 5),      //80px
         8: ($spacer * 6.25),   //100px
         9: ($spacer * 7.5),    //120px
         10: ($spacer * 9.375)  //150px
       ),
       $spacers
     );

Answer 3

I like this solution to keep the fractional spacers AND to have a number that makes sense for each class name (number = multiplier) : 

$spacer: 1rem;
$spacers: (
  0: 0,
  '025': (
    $spacer * 0.25,
  ),
  '05': (
    $spacer * 0.5,
  ),
);
@for $i from 1 through 5 {
  $spacers: map-merge(
    $spacers,
    (
      $i: (
        $i * $spacer,
      ),
    )
  );
}

Answer 4

There is a work around. Add another wrapper inside your element, and give it more padding classes.

If you want to have a p-6, then you would give the parent container, p-5, and the wrapper p-1.

Answer 5

May be this will also help. Assuming if you are using Bootstrap 4 and above with SCSS. Then you can add the following. Default 1 rem - 16px.

$spacer: 1rem;
$spacers: ( 0:0);
@for $i from 1 through 150 {
  $spacers: map-merge($spacers, (
  $i: ($i * $spacer)
  ));
}

 Note: Interesting thing is the $i will loop through up to 150 and create classes up to 150.

Example: If you put mt-10 in your any of your html tag. <div class="mt-10"> which will instantly work. mt-10 indicates 10 * 16 = 160px :)

Answer 6

This is a question that haunted me for a whole afternoon until I found a detailed explanation. Question was raised quite a while ago but here it goes anyway:

Provided you use SCSS, you have your own custom scss file and you want to add the option you mentioned, just make it look like this:

@import "../bootstrap/scss/functions";
@import "../bootstrap/scss/variables";

$spacers: (
    // The rest of numbers you need to use...
    6: ($spacer * 5)
);

@import "../bootstrap/scss/bootstrap";

The method is the one explained in the Bootstrap Documentation. I have to say that it's a bit obscure for the newbies but from what I understand it basically consists on importing the parts you are going to modify, add the values you need and finally import the whole thing to later create your CSS file with your additions.

Of course, you may have to change the route of your bootstrap files and get them locally on your drive. Not sure if this works importing from the online repository. Please also note that the order is important. The functions.scss must be imported before the variables.scss or it will fail.