Bootstrap 4 custom build generator / download [duplicate]

Does anyone know about an alpha/beta bootstrap 4 custom generator, same that is available for bootstrap 3 at Customize and download?

https://getbootstrap.com/docs/4.0/customize/ still unavailable


Solution 1:

As discussed here on Stack Overflow, there will not be a customizer for Bootstrap 4. This means that you'll have to build the Sass files manually. This can be achieved with the sass npm package, for example.

I've also created a tool that handles compiling the Sass and vendor prefixing, which I've been using to compile Bootstrap. This is a simple setup to get started with:

npm i bootstrap@4 sass-plus -D

Create a file called app.scss and import Bootstrap in there:

@import "bootstrap/scss/bootstrap";

Compile it:

npx sass-plus -i app.scss -o compiled.css

You should now find all of the Bootstrap-classes in compiled.css. You can make changes to the app.scss file and recompile and the changes will be reflected in the CSS, that can be referenced normally in HTML.

By importing Bootstrap components individually and changing Bootstrap's variables you can change the look of your site and the size of the compiled CSS.

Resources:

  • All Bootstrap components imported individually
  • sass-plus docs

Solution 2:

Great question! Bootstrap 3 had a customize page as you noted.

You could use this build tool: https://bootstrap.build/. I'm not sure if it is the replacement for the BS3 customize page or something new. It looks like a nice editor.

Or you could build a custom version of Bootstrap 4 with SASS.

This link provides more information about making a theme: https://getbootstrap.com/docs/4.0/getting-started/theming/

Solution 3:

It doesn't look like the Bootstrap team are going to offer a customizer like in v3.

As mentioned in other answers, bootstrap.build exists and has a very nice UI and gives access to most of the variables and options. Unfortunately it doesn't appear to being updated as quick as the Bootstrap team are releasing updates.

upgrade-bootstrap.bootply.com is another option but doesn't give any indication as to which v4 version is being used. It has only limited access to variables and options.

bootstrapcustomizer.compoutpost.com provides full access to all variables and options and is kept up-to-date with v4 releases. It's not as nice a UI as bootstrap.build but works.

(Disclosure: I created bootstrapcustomizer.compoutpost.com)