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.

You can use Gulp as an alternative to Grunt, but be aware that Bootstrap4 is still in the alpha stage. It would be recommended to use Bootstrap 3 until the final build is released. — paddyfields, Feb 21 '17 at 18:42
Here is a [Bootstrap SASS to CSS customizer tool](http://upgrade-bootstrap.bootply.com/bootstrap-4-customizer) that lets you set the variables. — Carol Skelly, Aug 24 '17 at 10:39
@Mark - will you please accept an answer for this question so others know it's resolved? — Carol Skelly, May 16 '19 at 09:58

Carol Skelly · Accepted Answer · 2019-03-01T13:34:34.110

4

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.

edited Mar 01 '19 at 13:34

answered Jul 13 '18 at 13:37

Carol Skelly

351,302
90
710
624

score 1 · Answer 2 · answered Feb 22 '17 at 02:01

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

answered Feb 22 '17 at 02:01

XY L

25,431
14
84
143

In the Tooling setup it says something about Ruby. I am having a problem adding a SASS gem to it. Should I make it definitely work? – Mark Feb 22 '17 at 14:17
What problem do you have? – XY L Feb 22 '17 at 14:21
Also it says "To use our Gruntfile and run our documentation locally, ..." Does that include bootstrap.css that I use in my app? – Mark Feb 22 '17 at 14:22
When I am adding SASS gem it's timed out. – Mark Feb 22 '17 at 14:29
Yes, it should include the bootstrap css files – XY L Feb 22 '17 at 15:02
I can also compile scss files using Scout-App application. Is it the same? – Mark Feb 22 '17 at 15:36

Customizing Bootstrap 4 css

2 Answers2

Linked

Related