Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customizing Bootstrap 4 css

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.

like image 637
Mark Avatar asked Feb 21 '17 16:02

Mark


2 Answers

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.

like image 126
Zim Avatar answered Oct 14 '22 09:10

Zim


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

like image 31
X.Creates Avatar answered Oct 14 '22 10:10

X.Creates