Vfrdtyky

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?

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;

    }

}

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