I'm fiddling with Bootstrap 4 and I really like how you can apply different components via @include make-row();
etc. But currently I don't know how to apply e. g. forms or headline styles.
I wonder: will it be possible to apply forms, headline styles etc. just like this? (Let's say @include form-group();
and @include h1();
)
Is it just not there because version 4 is still alpha? Or is it supposed to work in a different way? Or not at all?
And if it works the way I imagine, will the docs include a SCSS version of all components or a general documentation "how to work with SCSS"?
@mdo has stated in previous issues that providing mixins for _everything_ is a non-goal. (I'm sad about that, but it admittedly would require adding a lot of trivial boilerplate.) We do provide mixins for many components though.
will the docs include a SCSS version of all components
We aim to document relevant Sass mixins/variables/etc. when applicable, e.g. http://v4-alpha.getbootstrap.com/layout/grid/#sass-mixins . We're likely missing a lot of such docs at the moment, partly because we're still in Alpha and thus our Sass is still in flux.
or a general documentation "how to work with SCSS"?
Giving some general tips on using Bootstrap via Sass is on our to-do list: http://v4-alpha.getbootstrap.com/getting-started/best-practices/
Okay, thanks a lot. It's fine if there aren't mixins for simple things like buttons. The grid mixins are a great help already.
Actually I've just noticed I can use @extend
to apply styles from Bootstrap classes to other classes or elements. This does exactly what I was looking for.
Just an example to help others who want to do the same:
button {
@extend .btn;
@extend .btn-primary;
}
Most helpful comment
Okay, thanks a lot. It's fine if there aren't mixins for simple things like buttons. The grid mixins are a great help already.
Actually I've just noticed I can use
@extend
to apply styles from Bootstrap classes to other classes or elements. This does exactly what I was looking for.Just an example to help others who want to do the same: