32

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

Yatko
  • 8,715
  • 9
  • 40
  • 46

3 Answers3

35

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:

Klooven
  • 3,858
  • 1
  • 23
  • 41
9

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/

Jess
  • 23,901
  • 21
  • 124
  • 145
  • 13
    This is not the same thing. The version 3 customizer let you pick and choose which components to include, not just theme the entire thing. – AaronF Feb 11 '18 at 00:03
  • Just FYI my team is using SASS and building the SASS into a CSS file with Web Compiler in Visual Studio. Works great. This allows you to create your own BS Components pretty easily and even use "variants" like *-primary, *-success, *-info, etc. – Jess Feb 21 '18 at 14:03
  • Yes I have just introduced Bootstrap and it has broken a complex spreadsheet components so for that page I just want bootstrap buttons only, since I dont really understand Bootstrap would have no idea how to compile my own version – Paul Taylor May 21 '18 at 09:23
  • @PaulTaylor you don't need a custom build for that. Just use the css as you need it. – Jess May 21 '18 at 12:30
  • How would I extract it all correctly though – Paul Taylor May 21 '18 at 13:41
  • 1
    Here. https://jsfiddle.net/pydLyu4g/. Next time you should click **ask a question** so the comments don't get filled with stuff that is not directly related to the question. Have a good day! – Jess May 21 '18 at 14:30
9

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)

johna
  • 10,540
  • 14
  • 47
  • 72