Twitter’s Bootstrap has a standard tool to work with if you want to push an app out as fast as possible and want to have a clean familiar UI that does not take weeks to develop. I wrote previously about customizing bootstrap in haste and have decided to expand on my bootstrap customization guide with a better step-by-step tutorial that designers and developers can follow alike.

Note that there are NUMEROUS tools out there that will help you speed up this manual process and they’re listed at the bottom (you can skip everything altogether by buying a pro theme). However, they do not offer the fine-grained approach my guide offers.

After numerous complaints from my last article, I decided to do thing a bit differently:

  1. I shall attempt not to be rude during this article
  2. I’m building an example thus WILL provide an example
  3. I’ll be more thorough with explanation

Do we have that out of the way? Yes? Let’s start!

Finding The Right Colors

You’re not all designers and that’s fine; however, it makes picking colors much harder. I’ll describe two different methods of finding good colors for our theme. One of them involves manually picking colors, the other involves taking colors from an online repo of colors ;)

Using Color Scheme Designer

I think Color Scheme Designer is pretty badass and when I talked to the dev last year and he informed me of a 4.0 version coming, I was super excited. He gets hundreds of thousand of people every day and beyond that, it’s just an amazing tool.

Let’s dive into it. On the surface, CSD is just a programmable color wheel that works with many different settings. We can choose monochromatic, complement, triad, and other color settings. I don’t really want to get into color theory because that could take a long time but the basics of it are that using a color wheel and one of the settings, you’re more likely to hit colors that work together well.

I’ll use a cyan-like configuration:

Looks good! Keep in mind that we’ll probably use two or three of these colors max (if not just one!) and not all of them. Fortunately, boot theme (for example) has some cool presets that will take care of good color variation for us. In the top right, you can see a little note under the square with the colors that says “Scheme ID: number”. If you click on the number, a new window will open with a bookmarkable link that will lead you back to this scheme.

Now, some commenters didn’t like the results they got and thought the light page/dark page examples were even worse than they could imagine! Well, the light/dark examples are just GENERAL guidelines, so don’t listen to them. They may throw you off track.

Since I found this pretty cool color and I’m set on it, we can either skip to the BootTheme part or expand on this idea by searching Colourlovers and Kuler. If you’re a novice, just go with that. If you’re a pro, CL and Kuler may surprise you! :)

Using Colourlovers or Kuler

Colourlovers and Kuler are very similar sites in that they have repositories full of color palettes for all kinds of  purposes. Got an app idea but no clue what colors would be best to use? Just search a keyword!

We’ll search for “cyan”, both sites will give us great choices and examples. Of course, it’d be much better if I could think of something cyan I’d want to imitate! Wikipedia has some great examples of “cyan” things but I came across this palette:

Now, we not only have a primary Cyan color which somewhat matches our color scheme designer result. It’s like a desaturated version of the top right color. The rest of the colors? We can use those for warnings and button colors! :)

Let me show you a few more searches/examples to reiterate the relative ease of finding good colors for your bootstrap theme.

Let’s say you have an app about gardening (real life example for my part), and you want to use very zen like colors. Search for “zen garden” and you’ll get some neat results:

Kuler gives you a great color scheme which has the brown-greys for rocks, and several greens resembling the foliage typically found in the zen garden. You can use these colors to visually connect a user to your product/service/blog topic.

What I decided On

I decided to use a monochromatic (one color) configuration using that nice cyan color from the “Coin Slot” color config. You can do as you please but for beginners, a single color works well.

For you more advanced folks, you’re welcome to mess around with the other colors but like I said before, BootTheme and Bootstrap are really great at using a single color to create derivations and plug them in.

BootTheme vs Twitter Customize

Many complaints I’ve heard were regarding this part. How are you supposed to know what variables do what? Hell, I honestly have no clue what most of those mean! Haha jk, well, it’s hard to know what the result will look like without some kind of a preview. That’s why we switch to boot theme.

There’s a downside to boot theme, however. BootTheme does not always use the latest version of Bootstrap but honestly, that’s not a big deal. They update/upgrade fairly often so whenever you see a new release you’d like to implement, check if BootTheme upgraded to it. If it did, you can easily import your existing vars and BootTheme SHOULD include new variables and parts.

Also note that BootTheme MAY freeze up on you (unfortunately). The best step forward is to change the layout to something else and change back. No changes will be reflected but your variables will stay in placeUpdate: They fixed any and all issues! :)

NOTE: Okay, so there are a few issues with BootTheme in terms of exporting. If you just export CSS you’re fine but you’ll be lacking responsiveness. The best approach is to build a theme in BootTheme (so you know what it looks like) and enter those values back to Twitter’s Customize screen to download the full package! It may add another 10 minutes of copy/pasting to your workflow but it is well worth it. 

BootTheme

Let’s dive into BootTheme then:

Looks pretty standard. Let’s go over the details of BootTheme and it’s almighty power.

Design Page

In “Design Page”, you can paste in your own HTML code and work directly on top of it. So if you’re redesigning your current site that runs on bootstrap, you can just paste in the source code and get to work!

Layouts

BootTheme comes with three different layouts, the default showing you what’s in the screenshot, the demo layout showing all the elements in a slightly different fashion (one after another) and a blank layout that you can fill out by clicking on that neat icon left of the drop down.

You can also paste in the URL of a site you’re redesigning and going off that! :)

Screen Views

You can easily change the view of the layout from mobile to tablet and onward. This is great when you want to view what your site will look like on different devices. BootTheme does not natively include the responsive CSS bootstrap provides so you will not see the familiar collapsible navigation menu.

Finally, Variables

This is the part important to us. Quick tip. There are three buttons at the bottom of the variables bar “import”, “export” and “reset”. Basically, if you have your own custom vars picked out from before, you can import them. If you want to just get the variables from this experiment, click “export”. If you messed up beyond belief, click “reset”.

Let’s go over the customize toolbar:

  • Tabs: “Basic” includes the colors and different effects of your visual elements such as your navbar, hero unit, sidebar and so on. In “Advanced”, you can change up your grid and define a new place for your icon sprites. “Colors” will give you some cool colors to use and tells you to go to Color Scheme Designer or Kuler for ideas ;) okay! But you can’t change anything in this tab section. “Fonts” tells you that you can easily import any google webfont.
  • Dice: The dice button will change up the colors of your theme randomly. Bored? Keep clicking till you find something good!
  • Scaffolding: You can change your main body background color and text color. Note, you can’t change the background image here
  • Links: pretty obvious. Link color and hover
  • Typography: you’ll get to change stuff like font sizes, font families, heading colors, line heights etc. Note: you can simply paste in the name of a Google Web Font and it will be automatically imported
  • Tables: same deal. Background, background accent, hover (when you mouse over table rows), and border color
  • Buttons: this one will make the most impact in my opinion.
  • Navbar : here you can change the width the navbar will become “collapsed”, change the navbar height, background, hightlight (this will create a gradient), text color, link color, and all kinds of stuff. It’s a long list of very customizable variables
  • Pagination: Got the basics of border, active, and background colors for our pagination
  • Hero Unit: same as elsewhere
  • Dropdowns: here you can mess with the different effects of the dropdown from the navbar
  • Forms: basic form stuff
  • Form states and alerts: whenever you use validation with bootstrap, it’ll give you a red/green or otherwise color to show if the input is correct. You can mess with the specifics here
  • Tooltips & Popovers: move customization!
  • Miscellaneous: a “well” element background color and the color of the “horizontal rule” (hr element)

Phew. This seems like so much work to do! :) Well, we’ll simplify it and be on our merry way with a badass theme!

Fonts

In my opinion, you should not stick with the default fonts. Luckily there are plenty of sites that offer great font stacks! Here are some suggestions:

Let’s Add Our Colors & Variables

We have our color list from ColourLovers, right? Let’s keep that because I like that list better than what we got at color scheme designer. Mainly because the spectrum has also has colors that may work for our alerts and because bootstrap uses LESS to transfigure your primary color into a myriad of brighter and darker alternatives that will be used throughout the theme.

With the coin slot theme, we have the following available colors:

  • FA2E59 – the pinkish color
  • FF703F – the orange color
  • F7BC05 – yellow
  • ECF6BB – light green
  • 76BCAD – turquoise of sorts (azure or whatever) – MAIN COLOR.
So the main color will be our focus.
  • We’ll add our main color into @linkColor under “Links”. This will create not only our primary link color and button color but also it will create our hover color which is 15% darker than the original
  • Now, you can change the fonts under “Typography”; however, BootTheme WILL freeze up on you. And that really sucks. So save this for the last step. This may take a bit of fidgetting to get the right font and size. LUCKILY, Twitter’s Bootstrap natively uses the Helvetica stack. What does that mean? You’re falling in line with most sites out there because Helvetica, and Helvetica Neue are pretty much the most popular fonts out there other than Arial, Times New Roman, and other fonts from decades ago. For those adventurous ones, pick a font from one of the sites above, plug it in, and crank up the font size to 15px-16px which will ensure legibility with most fonts.
  • Now, the next unfortunate thing is that the “Buttons” section currently doesn’t work (I reported it to the owner of the site). If you are nifty enough with code, just open a code inspector and set the height of the “buttons” div to “auto” instead of “0px” and it’ll show up and work.  update: it works. Next section is the “buttons”. So where to put all our variables? Well, we have some custom warning colors. So let’s substitute @btnWarningBackgroundHighlight with our orange color #FF703F and the @btnWarningBackground, subsitute the original @orange with our orange color in that formula. Next Let’s use our pink-ish color as the @btnDangerBackground to give it a nice pink glow that fits in with the rest of our theme. Play around with it and if you don’t like it just set it back to what it was (I just Ctrl+Z the hell out of it if I don’t like it). In this case, I’m not a 100% okay with the danger color so I’ll set it back.
  • In navbar, I always increase the height in @navbarHeight to about 50px or so. I feel like it looks better this way.  In @navbarBackground, I changed the amount the navbar darkens to about 2% so that it’s only a subtle gradient. Next we’ll change the @navbarBackgroundHighlight to our main color because you know what? It looks pretty cool :) However, the main color is dark enough that we need to change the @navbarText, @navbarLinkColor, @navbarLinkColorHover, @navbarLinkColorActive to a “@white”. Change the @navbarLinkBackgroundActive to about 2%. BootTheme may freeze up on you here again so just changed the layout and come back. You might not see the changes but that’s fine. Trust me, it’ll look good :) Let’s skip the inverse navbar because that’s the regular bootstrap black bar. It’s fine to keep it. Chances are, you might not use it at all.
  • The hero unit always bothered me so change the @heroUnitBackground to “@white” and let’s move on

You can keep going and experimenting if you’d like but I feel like this is really enough to have a unique looking theme. Here’s the screenshot:

Not bad so far. Next, let’s export it.

If you feel satisfied, just export it as CSS and overwrite your original bootstrap file. If not, export as LESS and let’s keep moving!

Adding FontAwesome (if you used the LESS export)

FontAwesome is a pretty awesome bootstrap add-on / bootstrap plugin. It adds a TON of new icons in a font format so it’s easily scalable and malleable, what’s even better is that it works with the same markup as the default sprites effectively replacing the default bootstrap icons. Download it from the github site and extract it in the same folder your bootstrap less file is. Search for “Icons” in the bootstrap file, open up the LESS file included with FontAwesome and:

  • erase everything from the “icons” heading to the “dropdown menus”
  • copy/paste the entirety of the font-awesome.less file in there.
  • find the variable @fontAwesomePath and change it to the path where the fonts are (probably just erase the ../)
  • rebuild!

If you did NOT use BootTheme. The steps are a bit different:

  • paste the font-awesome.less file into your bootstrap directory
  • open up bootstrap.less and change the “sprite” import to import the font-awesome.less file. That’s probably all you need to do. If you have issues, change the font path.

Adding Responsiveness

All Bootstrap themes are, by default, non-responsive. So how do you add that cool responsiveness feature? You have three options:

Issues Rebuilding

Did you get an error about the @dropdownLinkColorHover compilation? That’s fine, go to your variables.less file or the top of your boottheme LESS file. Find @dropdownLinkBackgroundActive cut and paste it above @dropdownLinkBackgroundHover. That will take care of that bug.

Are you having trouble with @navbarBackground? That’s another bug in Bootstrap so just cut and paste the @navbarBackgroundHightlight above @navbarBackground.

Honestly, I don’t blame BootTheme for this, when I downloaded the LESS version of Bootstrap, I got the same issues and more. Urgh.

Final Product

So, I decided to download the bootswatch website and substitute the css file we created. Here’s the result:

The change of font REALLY made a difference and even though there are a lot of bootstrap-like elements, the app already shines on its own accord.

You may also view the theme itself on github pages.

You can download my free bootstrap theme via github.

Optional Add-Ons

Your work is pretty much finished but you CAN take extra steps just for the hell of it.

Adding a Background

So I spoke of subtle patterns in the past as being a great resource for patterns. Head to the site and download a pattern that will not interfere with your text.

  • If you’re using bootstrap and have all the less files, open up “scaffolding.less”. Add a body{ declaration and the path to your background image}
  • If you used the BootTheme file, scroll down to the body{ declaration and add the background}
Recompile or do whatever and see it work.

Other Site Examples

So, last time I got A LOT of crap for not showing examples. Well, here are some sites that people noted that DO use Bootstrap and make it very seamless. Some look extremely unique:

Other Resources

  • WrapBootStrap - Bootstrap themes marketplace.
  • http://jetstrap.com/ - Jetstrap is an online tool to build UI with Bootstrap via drag-drop. Web-based. OUT OF BETA!
  • ColourLovers - alternative to ColorSchemeDesigner. Find swatches here. Used not JUST for web.
  • StyleBootstrap - similar to boottheme
  • Bootstrap Image Gallery - an extension for image gallery
  • KickStrap - bootstrap enhancement suite with custom themes, js plugins, and more. Perfect solution for those that don’t want to customize
  • Bootswatch - free bootstrap themes
  • Kuler - Adobe’s color swatch library. If you can’t figure out the right colors even with colorschemedesigner, this is the place to go.
  • http://builtwithbootstrap.com/ <- repository of built-with-bootstrap sites for inspiration!
  • subtlepatterns – a great resource for backgrounds and patterns to use in Bootstrap
  • http://paintstrap.com/ - Uses a Kuler color scheme to build a bootstrap theme for you.

If you have any questions or concerns not addressed, please mention them in the comments!

Need any work done?

I’m currently running a circle of developers & designers that can help you out with your Bootstrap needs as well as any front-end/back-end work. Request A Quote for the job!