Bootstrap: Using version 4 completely with SCSS (all mixins)

Created on 24 May 2016  路  2Comments  路  Source: twbs/bootstrap

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"?

css docs feature v4

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:

button {
    @extend .btn;
    @extend .btn-primary;
}

All 2 comments

@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;
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ziyi2 picture ziyi2  路  3Comments

iklementiev picture iklementiev  路  3Comments

bellwood picture bellwood  路  3Comments

devfrey picture devfrey  路  3Comments

steve-32a picture steve-32a  路  3Comments