Oops! Download not working currently

Bootstrap has removed support for "Customize & download" for version 2.3.2. I'm currently working on an updated version for Bootstrap version 3. Let's hope nothing comes in between to stop me finishing it. Follow my Twitter account for updates at @prabinpebam.

Updated on 5th May 2014
I Love Bootstrap


What to expect

What to expect in future

  • Exhaustive coverage of all customizable variables available.
  • Save your customizations.
  • Share your customization and access others'.
  • Ability to use either hexadecimal or {less} variables.
  • Better user interface. I'm working on one at present. I hope I get enough free time to finish it.

Points to note

  • This version of Fancyboot is designed for Bootstrap Ver. 2.2.1
  • The current version was developed to work fine only on Google Chrome (for now). Some effects might not show correctly in the preview on other browsers.
  • Not all effects will be shown in the preview. But don't worry, the final compiled bootstrap css will be perfect as originally intended by Bootstrap.
  • Some fields are left without the color picker intentionally as you might want to use {less} variables.


Thanks to the bootstrap team, @mdo and @fat for such a wonderful framework.

Please visit the official Bootstrap website at http://twitter.github.com/bootstrap/ for full documentations and downloads.

The awesome color picker (jQuery Minicolor) that's been used in this page is a jQuery plugin from "Cory LaViska for A Beautiful Site ".

Finally, thanks to myself for finally making a decent customization tool for Bootstrap. :)

Visit my site at http://designspebam.com to see my other works


JS Components




Base CSS

Heads up!

All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.


Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Default Success Warning Important Info Inverse


# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter


Form Heading Example block-level help text here.

Misc 1




Misc 2


Other stuffs

Sample content inside a well

This is what a paragraph will look like inside a well. The color of the font is taken directly from the global font color assigned to the body markup and can't be customized separately (Bootstrap version 2.2.1). Hence you need to chose the well background color in such a way that the font color works both for body background and the well background.

Cancel Commit

Grid system

The current version does not support preview of the following variables.


Work on eanbling color picker and preview still going on. Check back in a few days. Nevertheles, you can still enter the values manually and compile your bootstrap.

Hero Unit

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more



Unluckily, as of Bootstrap 2.2.1, the text color of the form fields has all been assigned a default value and can't be changed. What you see is the default color which might not be suitable for darker background color. You can't have any value in the form preview fields as that interfere when you finally submit the form to compile. Hence any value is cleared as soon as the field lose focus.


Form states & alerts

Warning! Best check yo self, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Common elements between Navbar & Navbar inverse

Note: The Search field's height in the nav bar is directly taken from the @baselineHeight from the Typography tab. When you change the navbar height, Bootstrap 2.2.1 tries to align it vertically to the centre by assuming it's height to be a fixed value of 30px. Hence, it does not align properly for greater value of @baseLineHeight.

Please go to the "Navbar" tab for common variables between "Navbar" and "Navbar Inverse".

Customize and Download

What's included?

Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

Please leave your comments below