0

In Bootstrap, there's the coolest feature where I can specify padding and margins like this.

<div class="py-10 mt-5">...</div>

I'm using that exact div's class combo on every of my full page components. Then it stroke me that if I have to respace, I'm going to have to update each such thingy, which is a lot of work and error prone.

I can declare my own class like this, of course.

div.full-page {
  padding: 10px 0;
  margin-top: 5px;
}

However, it has the drawback of not relating to the spacing/sizing set by Bootstrap. Plus I got the impression that if I let Booty do its job in Booty'ish manner, the responsiveness and adaptivity will be present automagically. And I'm also curious is this might be an opportunity to learn something new, too.

I'd like to combine the two class effects (py-10 and mt-5) into a new class and then impose that new class onto my divs.

Is it possible and if so how?

NB - googling "combine" and "class" renders a lot of links regarding object oriented techniques. I'm not sure what to google for in this case, so my pre-research is limited. (Not due to laziness and cansomeoneelsedoitforme-ism but due to ignorance of keywords and limited fantasy.)

DonkeyBanana
  • 3,266
  • 4
  • 26
  • 65
  • [This may help you out.](https://stackoverflow.com/questions/4564916/nesting-css-classes) – Chirag Jain Dec 17 '17 at 17:24
  • Where are you getting py-10 from? I thought the values went from 0 to 5 lol –  Dec 17 '17 at 17:24
  • Isn't that what `@extend` is for? - https://www.sassmeister.com/gist/97555ba1cf098afc7c56160dfca67514 – Paulie_D Dec 17 '17 at 17:37
  • @Paulie_D Kind of. But I want to **combine** not **adhere**. I want to do zero of my own contribution, just piggy-back on the others (almost zero, of course). – DonkeyBanana Dec 17 '17 at 17:39

1 Answers1

1

First of as I mentioned in my comment, the values for those classes go from 0-5, there's no py-10. And you can make use of the bootstrap file:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css

Here's the reference: https://v4-alpha.getbootstrap.com/utilities/spacing/

Find the classes you need and copy their CSS styles and add them in a class of your own naming as:

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

.mt-5 {
  margin-top: 3rem !important;
}

You can make a class by the name of suppose: pymt-5

.pymt-5{
margin-top: 3rem !important;
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
  • Thanks. As fr the py-10 it's a typo. I didn't copy the code from my IDE - just typed in the *idea* of how it's supposed to work. Now, to the main question - I understand what you're suggesting and wonder if it's the only way. I.e. is the answer to my actual question "*no*"? As in - no, you can't combine classes as such, you can only combine it's definitions? Too bad - I was hoping to be able to hook in on the classes and when/if they ever change, I'd be piggy-backing on the changes without the need of recoding my source. – DonkeyBanana Dec 17 '17 at 17:37
  • @DonkeyBanana Well, it's a framework and it's fixed (until you modify the original files that is). If you do need to access them both, you have to include both classnames. And if you're looking for just combining them anyhow to a new class by not manually defining them, I guess javascript might be the way to go. But it would be a hassle to create a new class dynamically everytime you need something. Best way is just two include them as they are. –  Dec 17 '17 at 17:39