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?

Leman

mixing bootstrap margin and padding would give the 80px i guess (p-5 m-5). would this be compatible with other styled applied(bg, border, ...)? – Crinoid

I wasn't able to apply the changes as they said and after a lot of brainstorming I saw that in the file I was making the change, there was an import from the bootstrap utilities. I moved this import to after the change snippet and it worked perfectly. I used Regavan's for – Tertial

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;
    }
}

Serviceberry

I'm using React-Bootstrap, and adding the last code snippet to the component CSS worked for me. Thanks kball. – Arlyn

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
     );

Ulrick

This code is just a copy-paste from Bootstrap's _variables.scss. What is the official way of completely replacining the $spacers entries? Like when you need to add a .125 multiplier to be the first item with shifting all the others. – Hateful

Hey Alexander, this code is an extent via official way to answer the question "I would like to create one more option in the bootstrap spacers.". The basic bootstrap goes up to 5. Same logic goes to your question as well. Change all the values and start 1 from .125, 2 for .25 etc – Ulrick

Alright :) I've meant that when using this snippet we probably would not want to copy those !defaults. AFAIK, we should remove them when copy-pasting BS stuff into our SCSS. – Hateful

You don't simply copy/paste Bootstrap variables into your own code. Here is the official method of overriding Bootstrap default variable values: getbootstrap.com/docs/4.4/getting-started/theming/… . In this case, you can redefine $spacers to be whatever combination of spacer sizes that you prefer. – Suggestibility

Answer 3

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.

Chitterlings

This should be the accepted answer, the others recreate the existing spacers and adds some, this answer only adds which is what was asked. – Uraeus

Answer 4

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 :)

Grandniece

Thanks for the loop. I did not feel like doing calculations of how many spacers I might need :) – Towery

This is actually what i was looking for! Thank you. – Heimlich

Love this answer, although I prefer to start my $spacer at 0.5rem – Preponderance

Answer 5

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.

Anarchic

Yes, something like <section class='p-5'><section class='p-1'></section></section> – Cockrell

Answer 6

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,
      ),
    )
  );
}

Widower