Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Customizing Bootstrap

Twitter’s Bootstrap1 has taken off like a rocket since its release a year ago. The popular CSS framework supplies a responsive grid system, pre-styled components and JavaScript plugins to a parade of websites2.

One of Bootstrap’s appeals is that it just works. It’s a significant time-saver when starting a website, so much so that major organizations such as NBC, NASA and the White House are adopting it. And it empowers even the non-designers among us to turn out something decent.

To illustrate, you can transform the default button below on the left to the polished one on the right just by adding two classes: btn and btn-primary.

3
A browser’s default button (left) and a Bootstrap button (right).

But what if your company logo is a different shade of blue? Not to worry. You don’t have to stick with the defaults. This article shows some ways to customize Bootstrap to fit your needs, whether it’s a tweak to a button or a full-fledged theme.

4
Three Bootstrap themes from Bootswatch

Overriding With CSS Link

The most straightforward approach is to override Bootstrap’s styles using CSS. This can be accomplished by writing your own styles for the classes used in Bootstrap. You could, for example, make your buttons more rounded by adding the following code:

.btn {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

5
A Bootstrap button customized with an increased border radius.

For the overrides to be successful, remember to add your code after Bootstrap’s have been declared.

The advantage of this method is that it hardly changes your workflow. Even when using Bootstrap, you’ll want your own style sheet in order to fit the framework to your content just right. You might not realize it, but Bootstrap’s own website relies on a thousand-line style sheet on top of Bootstrap.

But for more extensive changes (such as overhauling the navigation bar) or for changes that aren’t localized (such as changing the highlight color used throughout the website), overriding in this piecemeal fashion can feel like a band-aid solution. And your new styles are tacked onto Bootstrap’s default style sheet, adding bloat to the already considerable 100 KB size. If you’re planning more than a few such overrides, you may want to consider a more extensive approach.

Generating A Custom Build Link

An alternative is to create a custom build entirely. With the official generator6, you can assign your own values to key variables that are reused throughout the framework, such as @linkColor, @navbarHeight and @baseFontFamily. Click the big button at the end of the generator and download the resulting style sheet. You can even pick and choose which components to include, slimming down your file size.

7
Some of the variables that can be set in the official generator. (Large version8)

Several third-party generators are also available on the Web. Unlike the official generator, they provide live previews as you adjust variables. Bootswatchr9 organizes itself by variable, and StyleBootstrap by component. BootTheme10 adds a roll-the-dice feature to randomize your values. If lady luck isn’t on your side, Lavish11 can generate a theme from any image you provide, and PaintStrap12 from existing color schemes.

Using a generator simplifies the logistics of custom-building Bootstrap. And with a deft hand, you can pull together a well-designed, unique look.

Digging Into LESS Link

Even with over a hundred variables, you still might find generators too constraining. Or you might not want to work in-browser, which can limit integration with your workflow. In either case, it’s time to dig into Bootstrap’s source.

Getting to the Source Link

As an open-source project, Bootstrap’s source code is freely available13 (ZIP) for downloading.

Open the source and you’ll notice that Bootstrap’s styles aren’t written in CSS after all, but in LESS14. LESS is a dynamic style sheet language that sports a number of advantages over CSS15, including the ability to nest selectors and to create variables (as used in the generators above). Once written, the LESS code is compiled to CSS either in advance or at runtime. If Sass is your preferred language, there’s a Sass conversion of Bootstrap16.

In the less directory, you’ll find a bunch of LESS files labelled by component.

17
The LESS files that make up Bootstrap’s source. (Large version18)

Some things to note about these files:

  • bootstrap.less
    This is the central file. It imports all of the others and is the one you’ll ultimately compile.
  • reset.less
    Always the first file to be imported.
  • variables.less and mixins.less
    These always follow because they’re dependencies for the rest. The former contains the same variables as used on the generator websites.
  • utilities.less
    This is always the last file to be imported, in order for the classes that it contains to override the rest of the styles where necessary.

Open up the LESS files and check out how Bootstrap styles each component. For example, in buttons.less, here is the rule for the .btn-large class:

.btn-large {
   padding: 9px 14px;
   font-size: @baseFontSize + 2px;
   line-height: normal;
   .border-radius(5px);
}

As you can see, it looks very similar to CSS. It does have a couple of LESS-specific features, however. In the font-size declaration, the variable @baseFontSize — specified in variables.less — and an addition operation are combined to calculate the value. The .border-radius mixin, defined in mixins.less, also handles vendor prefixes so that we don’t have to.

It’s within these LESS files that you can make your customizations. Start with the values in variables.less, then experiment with the styles in the rest of the source. Have some fun with it.

Installing LESS Link

After you’ve made some changes and are ready to view them, you’ll want to compile to CSS. To do this, you’ll need to install LESS. You have a number of options19; for starters, I’d suggest a client such as LESS.app20.

If you prefer the command line, then install Node.js21, which includes the Node Package Manager (NPM). Then, issue the following command:

npm install less

Once it’s installed, you can compile bootstrap.less like so:

lessc bootstrap.less > bootstrap.css

And for the minified version, use this instead:

lessc --compress bootstrap.less > bootstrap.min.css

Regardless of how you compile, target only bootstrap.less when compiling, not any of the other files.

Modularizing Your Changes Link

You might notice a limitation of the approach above. Your changes are now intertwined with the original source. So, when Bootstrap is inevitably updated with bug fixes and new features, disentangling your customizations and updating them to the new version will be nearly impossible.

To avoid this issue, you’ll want to modularize your changes. Here’s the approach I take when making themes for Bootswatch22.

First, I download Bootstrap’s source code, rename it to bootstrap and leave it untouched. Instead of making changes to the files that it contains, I create a separate folder, named custom, with these three files:

  • custom-variables.less
    I make a copy of variables.less from Bootstrap’s source and modify the variables in this copy instead.
  • custom-other.less
    This file holds any other customizations that I want to make that aren’t possible with the variables.
  • custom-bootstrap.less
    This is the new “central” file that you’ll compile to CSS. Along with the original LESS files, it imports the two custom files above using the following commands:
@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";

By keeping the changes separate, you can easily upgrade to newer versions of Bootstrap. Just replace the old bootstrap directory with the new one, and recompile.

I’ve created a boilerplate for this set-up, named swatchmaker23. It also includes some extras, such as test pages and commands to update Bootstrap to the latest version, to automatically compile whenever changes are saved, and to reset your customizations.

Tips And Techniques Link

Here are additional tips and techniques that you might find helpful when customizing Bootstrap.

  • Get to know Bootstrap.
    Read the official documentation24, familiarize yourself with all of the components, and learn the ins and outs of the source. If you will be regularly customizing Bootstrap, then the time you invest here will pay off down the line.
  • Start with variables first.
    Whether you’re using a generator or editing the source, begin your modifications with the supported variables. You might discover that they’re sufficient for your needs. Just changing the navigation bar and basic colors is a huge start.
  • Pick your palette.
    Think about your website’s color scheme, particularly your primary and secondary accent colors. Some good resources25 are out there to help you with this. After you’ve decided on a palette, set up and use these colors as variables. You shouldn’t be seeing hex codes sprinkled throughout your code.
  • Add some assets.
    A textured background26 and custom font27 make a world of difference. For Web fonts, you can add the @import statement anywhere in your code, because LESS will hoist it to the top of the generated CSS. I like to keep mine at the top of custom-other.less.
  • Use alpha transparency.
    When adding touches like box-shadow and text-shadow, define your colors using RGBa, with fallbacks for old browsers28, and use your values consistently. This will add cohesion to your components.
  • Match selectors.
    When overriding a class, try to use the same selector that Bootstrap uses. This will help to keep your classes in sync with the originals and avoid an escalating specificity war. Remember that, in a tie, the last one wins. With the modularized set-up above, your customizations will always override the defaults.
  • Encapsulate your code.
    Remember that LESS allows for nested selectors. Make use of this to encapsulate each component. I’ve found this to be a big help in keeping code tidy and readable. While both work the same, rather than using this…

    .navbar .brand {
       color: @white;
    }
    
    .navbar .nav > li > a {
       color: @grayLighter;
    }

    … try this:

    .navbar {
          
       .brand {
        color: @white;
       }
    
       .nav > li > a {
        color: @grayLighter;
       }
    }
  • Take advantage of mixins.
    Out of the box, LESS includes handy mixins such as lighten() and darken(). The ones that Bootstrap defines in mixins.less are also at your disposal. And don’t forget that you can always create your own.
  • Learn by example.
    Look at how others are customizing Bootstrap. For instance, the sources for all of my themes are available on GitHub29.

Do you have a tip to add? Please share in the comments below.

Final Word Link

If performance is a priority — as it often should be — then you’ll be best served by tailoring your own solution30 atop a more lightweight foundation31.

But if your goal first and foremost is to launch your website, or if front-end development isn’t your strong suit, then Twitter Bootstrap may be right for you. Many people put themselves in these camps, judging by Bootstrap’s popularity.

Given its heavy usage across the Web, consider taking everything good about Bootstrap and making it your own.

(al)

Footnotes Link

  1. 1 http://twitter.github.com/bootstrap/
  2. 2 http://builtwithbootstrap.com
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2012/09/buttons.png
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2012/09/themes.png
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2012/09/custom-button1.png
  6. 6 http://twitter.github.com/bootstrap/customize.html
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2012/09/generator-full.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2012/09/generator-full.png
  9. 9 http://bootswatchr.com
  10. 10 http://www.boottheme.com
  11. 11 http://www.lavishbootstrap.com
  12. 12 http://paintstrap.com/
  13. 13 https://github.com/twitter/bootstrap/zipball/master
  14. 14 http://lesscss.org
  15. 15 https://www.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/
  16. 16 https://github.com/thomas-mcdonald/bootstrap-sass
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2012/09/bootstrap-less-full.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2012/09/bootstrap-less-full.png
  19. 19 http://lesscss.org/#-client-side-usage
  20. 20 http://incident57.com/less/
  21. 21 http://nodejs.org
  22. 22 http://bootswatch.com
  23. 23 https://github.com/thomaspark/bootswatch/tree/master/swatchmaker
  24. 24 http://twitter.github.com/bootstrap/scaffolding.html
  25. 25 http://www.colourlovers.com
  26. 26 http://subtlepatterns.com/
  27. 27 http://www.google.com/webfonts/
  28. 28 http://css-tricks.com/rgba-browser-support/
  29. 29 https://github.com/thomaspark/bootswatch/tree/gh-pages
  30. 30 https://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
  31. 31 http://html5boilerplate.com/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Thomas Park does UX research and design out of Philadelphia, PA. He is the creator of Bootswatch, a library of free themes for Bootstrap. Check out his personal blog or follow him on Twitter.

  1. 1

    I’ve been using Bootstrap for a while now and on various types of UIs. Quite frankly, I’m coming to the conclusion that it’s a bit of an overkill to use these types of frameworks if you’re already using LESS or SASS (variables and functions in CSS: the stuff of dreams in 1995). From now on, I plan to use a more granular approach as I’m quite comfortable building my own DHTML components. I thought of using the semantic.gs grid system (look at the source code, you’ll see why) and maybe LESS Elements to wrap those vendor prefixes.

    I highly suggest people consider reading the 2007 article “tailoring your own solution” mentioned in “The Final Word” at the conclusion of this post. I think smashing magazine had a moment of clarity there, especially the “Disadvantages” section.

    0
  2. 2

    Gaurav Mishra

    March 20, 2013 3:06 am

    While doing the customization of Bootstrap based themes, it has opened the visual plethora for clients and designer can product different tastes of a theme, which can gel or let say best fist with the brand style guideline of the customer/big client.

    0
  3. 3

    Great Article + Tips. Anyone know if the SASS Conversion is trustworthy?

    -2
  4. 4

    Chris Colman

    March 30, 2013 1:35 pm

    In the article your custom-bootstrap.less has:

    @import “../bootstrap/less/bootstrap.less”;
    @import “custom-variables.less”;
    @import “custom-other.less”;
    @import “../bootstrap/less/utilities.less”;

    Yet when I look into bootstrap.less it already imports utilities.less. Is this a problem?

    On your blog at http://thomaspark.me/2012/02/introducing-bootswatch/ you say to edit bootstrap.less and insert the @import of bootswatch just before the @import utilities.

    The blog entry is much older than this smashing magazine article so I assume this newer approach is better but what about the problem I mention above with utilities.less?

    -1
    • 5

      I read some where, @import is loading slow. Is this true!!

      1
    • 6

      Mixins (css variables) override each other during the compile process. So by mentioning utilities.less last, all mixins within that file will override all existing mixins.

      1
    • 7

      Hey Chris, good question. In either case, the goal is to ensure that utilities.less is the last file imported.

      With the older approach, you’re only importing utilities.less once.

      With the newer approach in this article, there is some redundancy but you leave the Bootstrap source completely untouched, making it easier to track your modifications and upgrade Bootstrap versions. Especially if you’re just pre-processing the LESS, this is probably the way to go.

      0
  5. 9

    Chris Colman

    March 30, 2013 3:16 pm

    Another question ;)

    In bootstraps dist responsive.less is compiled to bootstrap-responsive.css

    responsive.less also includes variables.less (which is tailored for each swatch) so does that mean we need to compile responsive.less as well as bootstrap.less whenever we make a change to a swatch (assuming we’re building a responsive website).

    0
    • 10

      I’ve had the same issue as Chris with the responsive.less including the variables.less.
      I was banging my head against a wall when my swatch colors weren’t being pulled in.

      Looking at responsive.less, it just imports the individual responsive files (responsive-767px-max.less, responsive-768px-979px.less etc). So doesn’t it make sense to import these separate files into our custom-bootstrap.less, and NOT import responsive.less?
      The media queries are written in the individual less files.

      My custom-bootstrap.less has:

      @import “custom-variables.less”;
      @import “../bootstrap/less/mixins.less”;

      … (more @imports)…

      // responsive
      @import “../bootstrap/less/responsive-768px-979px.less”;
      @import “../bootstrap/less/responsive-1200px-min.less”;
      @import “../bootstrap/less/responsive-navbar.less”;
      @import “../bootstrap/less/responsive-utilities.less”;

      // Utility classes
      @import “../bootstrap/less/utilities.less”; // Has to be last to override when necessary

      Then you just compile your custom-bootstrap.less into css.

      1
      • 11

        Ignore that, doesn’t work, as the file says it needs compiling separately.
        I’m going to take a copy of responsive.less and reference my custom-variables.less in it instead of the default variables.

        0
    • 12

      Simply include responsive.less in custom-bootstrap.less, like this:
      @import "../bootstrap/less/bootstrap.less";
      @import "../bootstrap/less/responsive.less";
      @import "custom-variables.less";
      @import "custom-other.less";
      @import "../bootstrap/less/utilities.less";

      0
    • 13

      Yes, you have to compile both files to be responsive. Note that in the upcoming Bootstrap 3, there will be only one stylesheet that’s always responsive.

      0
  6. 14

    Luis González

    April 2, 2013 6:11 pm

    Great article, thanks!

    By the way, I’ve been trying to tweak an example for Bootstrap’s site and I found some hard to track issues.
    For example, the starter example has “bootstrap.css” linked on the head, below there’s some inline styling and below of that, “bootstrap-responsive.css” is also linked, all of this within the head.

    I tried changing the container width below all these linked stylesheets, and didn’t work.
    Then, I moved “bootstrap-responsive.css” right below “bootstrap.css” and added my custom styling below.

    This way I changed the container’s width, but the navbar on top behaved strange when resizing the page on the browser (it didn’t stick to the top).

    So my question is, where exactly should I add my custom styling?
    Should I link it before or after the bootstrap’s stylesheets (both of them)?

    What should I do when both stylesheets are linked to the page (the default and the responsive one)?

    0
    • 15

      The last css to load must be your custom. As app.css loads in roothstheme for wp (with bootstrap)

      But, I know the right thing is keep the original css unedited, but dont know why… Maybe you can explain. Why not edit the original files?

      0
  7. 16

    To other newbies having problems. This article was very inspiring and gave me the courage to try Bootstrap. But I could tell by the questions at the end it wasn’t detailed enough for me, especially the scary LESS stuff. I asked around and found a much more broken down guide to customizing Bootstrap at Packt Press:
    Free article: http://www.packtpub.com/article/downloading-and-setting-up-bootstrap
    $5 e-book: http://www.packtpub.com/twitter-bootstrap-web-development/book

    Thank you for this great tutorial– and it totally saved me from having all my work getting overwritten by making a custom (or child-like?) theme! I’m teaching high school kids this!

    0
  8. 17

    Scott Rosenthal

    April 12, 2013 12:41 pm

    Easily import twitter bootstrap/bootswatch themes into your rails app:

    https://github.com/scottvrosenthal/twitter-bootswatch-rails

    1
  9. 18

    colin summers

    May 2, 2013 7:47 am

    I am not new to Bootstrap CSS, but I am new to LESS. Is there any good articles out there that explain both Bootstrap and LESS together?

    1
  10. 19

    Thanks great tutorial

    0
    • 20

      Thank you for this great tutorial– and it totally saved me from having all my work getting overwritten by making a custom (or child-like?) theme! I’m teaching high school kids this!

      0
  11. 21

    Bootstraptor

    May 5, 2013 3:13 am

    Developing sites on this framework, we at the beginning faced with the fact that official basic templates is not enough for fast start with Bootstrap. Gradually accumulated some templates, we have decided to provide it for Bootstrap community. Free of charge to download a set of basic template build with Bootstrap framework on his popular base. here link http://www.bootstraptor.com

    0
  12. 22

    Mark Hallam

    May 5, 2013 7:15 pm

    How can you create gradients in CSS for navigation bars (like the one in Bootstrap)?

    0
    • 23

      Mark – Have you seen colorzilla (http://www.colorzilla.com/gradient-editor/)? It’s a very useful to for creating gradients in CSS.

      0
    • 24

      To make gradients like the those that are present in the scaffolding.htm example (and others), look for the “Jumbotrons” class in the docs.css file that is included with those examples. These define all the gradients for those boxes.

      Since there is no docs.less file in the standard bootstrap build, one must create and include it with the custom build. I just copied the docs.css and created a docs.less file and imported it as with the example above. @import “docs.less”;

      I didn’t really go through the docs.css to really identify what, exactly, it’s adding and I suspect that it’s probably loading a lot of bloat… Is it?

      Also, does anyone know what the div named “dic_bubble” get used for?

      0
    • 25

      Bootstrap’s source comes with some nice LESS mixins for creating gradient effects. Check those out!

      0
  13. 26

    I’m primarily a UI / UX designer and I’m adopting Bootstrap specifically for prototyping.

    Its great as it’s relatively quick and saves time doing hundreds of wireframes and ui mockups.

    4
  14. 27

    Great post, but I have one question:

    You say you just make a copy of variables.less from Bootstrap’s source and modify the variables in this copy instead. Then you say when you upgrade to a newer version of bootstrap, you just replace the contents of the bootstrap directory.

    But what happens if bootstrap adds, changes or removes variables in variables.less? Since you’re still relying on the copy you made from the older version, you won’t pick up these changes. Do you just have to manually compare and merge the files?

    1
    • 28

      I was wondering that myself. Would it be better to populate the custom less file with only those things that are modified?

      0
    • 29

      Good point. There has been the occasional minor change (usually a new variable) to variables.less as Bootstrap 2 has progressed. I myself do a manual inspection with each new version. I find keeping the structure of variables.less useful for this purpose as I can run a diff command to scan for changes.

      Bootstrap 3 on the other hand involves a whole reworking of the variables.

      1
  15. 30

    This is by far the best tutorial I have found on this subject. My web project was totally a mess until I learned how to overwrite it “the right way”.

    Thanks a lot for sharing, this was just awesome.

    0
  16. 31

    Great article, thanks!
    I’m tackling this task with version 3 and your tips will ensure I can update the base files as new revisions are released.

    2
  17. 32

    Question – How best to manage additional LESS file for specific pages?

    For example, if I load bootstrap.css into a base html file (using templating) I can’t draft new, stand-alone Less files for other, specific pages because I lack dependencies. I need to import the bootstrap.less file to get all functionality.

    I’ve been creating separate CSS files for each page (so one is bootstrap.css with home.less include, another has dashboard.less included, and so on) and only loading that one CSS file for the specific page.

    Anyone know a better way I’m not realizing?

    1
  18. 33

    When installed twitter bootstrap on drupal 7, less does not work, can give some advice?

    0
  19. 34

    Shahul Hameed

    August 26, 2013 11:19 pm

    Great Article,…Thanks a lot. If you can include the technique of changing the design of the bootstrap template, will be great.

    Thanks

    -1
  20. 35

    Thank you for your nice tutorial. I learnt a lot from it. :D

    1

↑ Back to top