Padding and Margin expanded

Webdesign Help
1

Hy all…

In bootstrap default there is de logic of margin and padding like: mb-1, mb-2 and so on… Possible nummers are 1 - 5. Where can i expand this logic with 6, 7, 8, 9, and so on?

Thank you for your help.

Cheers, reto

2

Create classes for them in your custom css file. I don’t believe those exist within the Bootstrap code but I’m sure they are easily setup if you use the ones that are there as guides.

3

As @jo-r said, you have to learn to write CSS, and then this stuff is a piece of cake. You can easily look in the Styles panel and see what the CSS rules are on the utility classes you apply to components. For example, pt-4 is actually

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

so if you wanted to make your own utility class like pt-6, you would create a new CSS class, call it .pt-6 and then write the following in your custom CSS file…

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

I chose 3.5rem as an example, but it could be 4rem or 4.5rem, or even px or any other supported CSS measurement.

Then you’d just add it through the attributes panel like any other Bootstrap utility class.

4

Thank you for your reply. I know a can create some new css-classes. But there ist a logic in bootstrap-default, like here: Spacing · Bootstrap v5.0

My aim is, to expand this logical, but i dont find de source of this logical in the bootstrap default. Its not in the _variable.scss i think. But where is it?

5

I think it is in the _variables.scss file. I think you can add in the $spacers map. You’ll probably have to compile the scss. Let me know if this worked for you. I’ve been looking but haven’t tried it yet. I was assuming that the bootstrap files were locked inside studio.

// scss-docs-start spacer-variables-maps
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
) !

I also found a neat explanation on how to do this.

6

Thank you all. That was the solution.