Meteor - Using Bootstrap with Meteor

meteor - done reading

meteor add twbs:bootstrap

What does the twbs:bootstrap package provide?

It provides compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). CSS source maps (bootstrap.*.map) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.

How can we use Twitter Bootstrap with Meteor?

// 1. Add the less compiler so meteor compiles everything for you
meteor add less

// 2. Add the bootstrap
meteor add nemo64:bootstrap

// 3. Clone this stylesheet boiler
// Also delete the .git folder and .gitignore if you don't like those
cd yourapp/client/
git clone

// 4. Add everything you need into the file
// yourapp/client/vendor/custom.bootstrap.json

I now use the bootstrap package that originally came from simison and was updated for Meteor 0.9. by nemo64. This means the old bootstraap package I created will not be maintained since the package from Simison/Nemo64 does the exact same and even more.

If you first run your app the bootstrap related parts will be automatically build for you inside the /vendor folder. So do not worry if you cannot find anything after you followed the steps mentioned above. Also make sure you checkout the 'vendor/custom.bootstrap.json' file and enable anything you need for your app. As a default most is disabled.

If you get the 'client/stylesheets/custom.bootstrap.json: Unexpected token ;' error, simply remove the ';' at the end of the file mentioned and restart the app. I think this will be fixed soon.

If you use @import "file.less" make sure you name the imported file "file.import.less" (or *.lessimport before Meteor v0.7.1). This way Meteor knows that it does not have to compile the file automatically.

The style.less file is our main style file and only this will be compiled to an actual CSS file. Since we are using less now, we can easily customize Twitter Bootstrap. For that we have the "vendor/custom.bootstrap.import.less" file. This file is just a copy of the original "variables.less" file from Twitter Bootstrap.

In the variables file of bootstrap you find something like this:

// Variables
// --------------------------------------------------

//== Colors
//## Gray and brand colors for use across Bootstrap.

@gray-darker:            lighten(#000, 13.5%); // #222
@gray-dark:              lighten(#000, 20%);   // #333
@gray:                   lighten(#000, 33.5%); // #555
@gray-light:             lighten(#000, 60%);   // #999
@gray-lighter:           lighten(#000, 93.5%); // #eee

@brand-primary:         #428bca;
@brand-success:         #5cb85c;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;


As you can see you can now very easily change the brand colors. There are really a lot of options for every component that you get with Twitter Bootstrap. There is really no need to overwrite bootstrap CSS if you use the variables, most of the time.

Less comes with a great feature called 'Mixins' which basically lets you write functions you could use in your less files to generate CSS. One very simple Mixin of Twitter Bootstrap is this one:

.border-top-radius(@radius) {
    border-top-right-radius: @radius;
    border-top-left-radius: @radius;

This simply lets you define the top border in a single line. Really nice is this e.g. if you want to set transitions and you do not need to worry about vendor-prefixes anymore. So using the less version of Twitter Bootstrap also lets you access all its mixins.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License