Customizing Bootstrap

Advertisement

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

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

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 StyleBootstrap10 by component. BootTheme11 adds a roll-the-dice feature to randomize your values. If lady luck isn’t on your side, Lavish12 can generate a theme from any image you provide, and PaintStrap13 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

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

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

Open the source and you’ll notice that Bootstrap’s styles aren’t written in CSS after all, but in LESS15. LESS is a dynamic style sheet language that sports a number of advantages over CSS16, 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 Bootstrap17.

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

18
The LESS files that make up Bootstrap’s source. (Large version19)

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

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 options20; for starters, I’d suggest a client such as LESS.app21.

If you prefer the command line, then install Node.js22, 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

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 Bootswatch23.

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 swatchmaker24. 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

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

  • Get to know Bootstrap.
    Read the official documentation25, 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 resources26 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 background27 and custom font28 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 browsers29, 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 GitHub30.

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

Final Word

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

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)

↑ Back to topShare on Twitter

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.

    1
  2. 2

    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?

    0
  4. 4

    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?

    0
    • 5

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

      0
    • 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.

      0
    • 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

    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.

      0
      • 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

    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

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

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

    0
  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?

    0
  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

    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

    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.

    0
  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?

      -1
    • 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.

    1
  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.

    1
  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

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

    Thanks

    0
  20. 35

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

    0
  21. 36

    Erlend Sogge Heggen

    September 7, 2013 11:57 pm

    Thanks a bunch for the tutorial! Could you kindly consider writing an updated version for the new Bootstrap 3.0?

    0
  22. 37

    Thanks for sharing some info on LESS, this article helped me with customizing Bootstrap much faster.

    For anyone looking for a bit more of a head start when building a Bootstrap-based site, I have launched a new project call Start Bootstrap – a free and open source library of HTML starter templates up to date for Bootstrap 3.

    If you’re interested in some free Bootstrap templates, you can see them over at our website: http://startbootstrap.com!

    With some basic overrides of the default Bootstrap styles along with using a tool like Bootswatch, you can create some great looking websites very quickly with combining these tools and techniques.

    0
  23. 38

    I’m attempting to follow your instructions to set up the custom less files but I’m getting the below error when trying to compile my LESS. I’m using CodeKit for the compiler and Bootstrap 3. It’s like it’s not able to find the files but they are all there. Any help would be appreciated.

    ” FileError: ‘../bootstrap/variables.less’ wasn’t found in /Users/ElroyM/Sites/Qualcentral/less/custom-bootstrap.less on line 13, column 1:”

    0
  24. 39

    The swatchmaker link seems to be broken.

    0
  25. 40

    “For the overrides to be successful, remember to add your code after Bootstrap’s have been declared.” -This sentence helped me a lot. There are so many like me for the solution, hope they find it. Thank you very much for the article.

    0
  26. 41

    I downloaded the bootstrap 3.0.2 source, there i found the other folders along with the less folder, what are the folders needed to be included in web project to start with, i am doing customization as specified by the author of this doc.

    0
  27. 42

    For advanced customization of the Twitter Bootstrap library in your project using Git branching see the following blog post:

    http://tarkus.me/post/70489442659

    0
  28. 43

    Hi,

    Can anyone point me to a tutorial or show me an easy way to use bootstrap with grunt and bower?
    Without added complications as i have with https://github.com/mattbegent/staddle/
    in the past?

    0
  29. 44

    I hate less, do I have to use it with Bootstrap?

    0
  30. 46

    Everything i was looking for. Thanks a lot!

    1
  31. 47

    Thanks for a great article. Twitter bootstrap framework has really taken the world by storm. Every client of ours (http://www.netlingshq.com) is asking for Bootstrap compatibility for there PSD to HTML projects. If you want to use Twitter Bootstrap with Rails and use SASS, this article http://pivotallabs.com/sass-with-bootstrap/ provides a good workflow. Alternatively if you can look at Foundation 5 which has pretty tighter integration with SASS and Rails. http://foundation.zurb.com/.

    0
  32. 48

    This article is amazing! Such a big help to me and I’m sure loads of other developers! Thank you so much
    Charlotte

    0
  33. 49

    Loved this tools.
    Another great tool for Bootstrap it’s the ‘BS ClassMaker’, I use it a lot to build new styles for my clients.
    http://www.bsclassmaker.com

    6
    • 50

      Markus Fantone

      May 16, 2014 9:16 pm

      Awesome tool!
      It saved me plenty of time. I really don’t liked to search for a good combination of bg color, border color, hover color.
      Just added the main color and it did this like magic! LOL

      5
  34. 51

    A good resource to study all bootstrap elements and plugins in detail, so that your can customize your website yourself is http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Input_Group.php. Do give it a try, you will like it. This is no spam

    0
  35. 52

    I love using bootstrap! I met a lot a of designers that bash it because it’s “stifling creativity” or “making all sites look the same”. I do not feel that way at all. If the styles are never customized than its pretty bland.

    As a more backend-oriented dev, I love using it for quick development. Once I have most of the element in place I usually grab a theme or color scheme http://www.bootstrapstage.com/free-themes/

    From there I usually make some more tweaks, but this works great, and makes some pretty good looking products.

    0
  36. 53

    This is one of the greatest posts I’ve ever read. Really useful, thanks!!

    1
  37. 54

    Reony Tonneyck

    June 5, 2014 5:07 pm

    Thanks so much for this. I use this setup all the time. I also just wanted to share my 2014 setup for this. It works perfectly:

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

    /*—————[ ### BOOTSTRAP UTILITIES - less/utilities.less ]—————————*/
    @import “../utilities.less”;

    /*—————[ ### BOOTSTRAP RESPONSIVE UTILITIES - less/utilities.less ]—————————*/
    @import “../responsive-utilities.less”;

    1
    • 55

      Reony Tonneyck

      June 5, 2014 5:08 pm

      Oops, last commented line of code is wrong. should be for responsive-utilities. But doesn’t matter :)

      0
  38. 56

    Thanks for sharing this info. I like the approach of overriding the LESS variables to customize Bootstrap. I wrote an article(http://prideparrot.com/blog/archive/2012/12/how_to_create_a_simple_blog_part1) about that. I believe people come to this place may find it helpful too.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top