Customizing Bootstrap 4 css

Question

I am following this link: Docs

Specifically: Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable’s value and recompile with the included Gruntfile as needed.

I have never used Gruntfile before. Can I use other tools to compile scss into css? Also, what the outcome of such compilation is going to be? A _custom.css that must be placed in the same folder where original bootstrap.css is?

Thanks for help.

Answer 1

You actually do not need to know too much about Grunt. Bootstrap 4 provides doc on how to setup build tools which can be found at,

https://v4-alpha.getbootstrap.com/getting-started/build-tools/#tooling-setup

Run grunt (or a specific set of Grunt tasks) to rebuild distributed CSS and JavaScript files, as well as our docs assets.

My suggestion is to clone the Bootstrap Beta 4 from Github change the variable and rebuild using the reconfigure gruntfile.

https://github.com/twbs/bootstrap#running-documentation-locally

Answer 2

While there is not an "official" Bootstrap 4 customizer like there was in 3.x, there are several tools that can do this. These all convert from SASS to CSS, and some provide a UI if you're not familiar with SASS.

Themestr.app Customizer

Bootply Customizer

Also see this answer for details on how to customize with CSS overrides or SASS.