Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 4 add more sizes spacing

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?

like image 220
nicogaldo Avatar asked Sep 08 '17 14:09

nicogaldo


People also ask

How do I give more margins in bootstrap?

Similarly, to add margin to an element, we can use the following margin classes: 'm-{size}' for all sides, 'mt-{size}' for top, 'mb-{size}' for bottom, 'ml-{size}' for left, 'mr-{size}' for right, 'mx-{size}' for horizontal and 'my-{size}' for vertical margins.

Which class will you use to set margin auto to the right side in bootstrap 5?

l - for classes that set margin-left or padding-left. r - for classes that set margin-right or padding-right.


1 Answers

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;
    }
}
like image 176
kball Avatar answered Sep 21 '22 15:09

kball