Tip: Use sass-plus to compile Sass and add vendor prefixes automatically: https://www.npmjs.com/package/sass-plus
| /*! You can insert a comment here. It will be included in the CSS. */ | |
| //Custom SCSS can be placed in here, for example | |
| //Required | |
| @import "bootstrap/scss/functions"; | |
| @import "bootstrap/scss/variables"; | |
| @import "bootstrap/scss/mixins"; | |
| //Components - remove any that you don't need | |
| @import "bootstrap/scss/root"; | |
| @import "bootstrap/scss/reboot"; | |
| @import "bootstrap/scss/type"; | |
| @import "bootstrap/scss/images"; | |
| @import "bootstrap/scss/code"; | |
| @import "bootstrap/scss/grid"; | |
| @import "bootstrap/scss/tables"; | |
| @import "bootstrap/scss/forms"; | |
| @import "bootstrap/scss/buttons"; | |
| @import "bootstrap/scss/transitions"; | |
| @import "bootstrap/scss/dropdown"; | |
| @import "bootstrap/scss/button-group"; | |
| @import "bootstrap/scss/input-group"; | |
| @import "bootstrap/scss/custom-forms"; | |
| @import "bootstrap/scss/nav"; | |
| @import "bootstrap/scss/navbar"; | |
| @import "bootstrap/scss/card"; | |
| @import "bootstrap/scss/breadcrumb"; | |
| @import "bootstrap/scss/pagination"; | |
| @import "bootstrap/scss/badge"; | |
| @import "bootstrap/scss/jumbotron"; | |
| @import "bootstrap/scss/alert"; | |
| @import "bootstrap/scss/progress"; | |
| @import "bootstrap/scss/media"; | |
| @import "bootstrap/scss/list-group"; | |
| @import "bootstrap/scss/close"; | |
| @import "bootstrap/scss/toasts"; | |
| @import "bootstrap/scss/modal"; | |
| @import "bootstrap/scss/tooltip"; | |
| @import "bootstrap/scss/popover"; | |
| @import "bootstrap/scss/carousel"; | |
| @import "bootstrap/scss/spinners"; | |
| @import "bootstrap/scss/utilities"; | |
| @import "bootstrap/scss/print"; |
Thanks! That sounds like a good idea. I'll change that. 👍
I'll also have a look at the new Bootstrap components and add them in here ASAP.
Spinner and toast components are now added to the SCSS - everything should now be up to date (Bootstrap 4.6.0)! 🎊
The container and max-width breakpoints components are not listed.
Are you using Bootstrap 5? Everything should be included and up-to date for Bootstrap 4 in this Gist. I'll probably create a separate Gist for Bootstrap 5 at some moment. I can add a link to it when I've created it.
Yes, I do, @Klooven, I want to use max-width instead of min-width for both breakpoint and container.
Ok, that explains it. I'll create a similar Gist for Bootstrap 5 in the coming weeks. In the meantime, feel free to look at Bootstrap's docs or repo as a reference: https://github.com/twbs/bootstrap/blob/v5.0.1/scss/bootstrap.scss 🙂
@Klooven: Great one!
I'd add a remark if you don't mind, lost couple of time to figure it out since for me it was not clear.
Then you can compile everything in your command line with npm run build.I'd change to: (removing the final dot since its quite confusing.
Then you can compile everything in your command line with npm run buildTested and works with latest version.