angular-ui-bootstrap travis-ci grunt karma npm

Native AngularJS (Angular) directives for Twitter's Bootstrap. Small footprint (5kB gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required!

bootstrap - AngularJS directives specific to twitter bootstrap

Build Status devDependency Status


Do you want to see directives in action? Visit!


Installation is easy as angular-ui-bootstrap has minimal dependencies - only the AngularJS and Bootstrap’s CSS are required. After downloading dependencies (or better yet, referencing them from your favourite CDN) you need to download build version of this project. All the files and their purposes are described here: Don’t worry, if you are not sure which file to take, opt for ui-bootstrap-tpls-[version].min.js.

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the ui.bootstrap AngularJS module:

angular.module('myModule', ['ui.bootstrap']);

Project files are also available through your favourite package manager: * Bower: bower install angular-bootstrap * NuGet:

Supported browsers

Directives from this repository are automatically tested with the following browsers: * Chrome (stable and canary channel) * Firefox * IE 9 and 10 * Opera * Safari

Modern mobile browsers should work without problems.

IE 8 is not officially supported at the moment. This project is run by volunteers and with the current number of commiters we are not in the position to guarantee IE8 support. If you need support for IE8 we would welcome a contributor who would like to take care about IE8. Alternativelly you could sponsor this project to guarantee IE8 support.

We believe that most of the directives would work OK after: * including relevant shims (for ES5 we recommend * taking care of the steps described in

We are simply not regularly testing against IE8.

Project philosophy

Native, lightweight directives

We are aiming at providing a set of AngularJS directives based on Twitter Bootstrap’s markup and CSS. The goal is to provide native AngularJS directives without any dependency on jQuery or Bootstrap’s JavaScript. It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the orginal JavaScript code size and better integrated into the AngularJS ecosystem.


All the directives in this repository should have their markup externalized as templates (loaded via templateUrl). In practice it means that you can customize directive’s markup at will. One could even imagine providing a non-Boostrap version of the templates!

Take what you need and not more

Each directive has its own AngularJS module without any dependencies on other modules or third-pary JavaScript code. In practice it means that you can just grab the code for the directives you need and you are not obliged to drag the whole repository.

Quality and stability

Directives should work. All the time and in all browsers. This is why all the directives have a comprehensive suite of unit tests. All the automated tests are executed on each checkin in several browsers: Chrome, ChromeCanary, Firefox, Opera, Safari, IE9. In fact we are fortunate enough to benefit from the same testing infrastructure as AngularJS!

Contributing to the project

We are always looking for the quality contributions! Please check the for the contribution guidelines.


Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install global dev dependencies: npm install -g grunt-cli karma
  • Instal local dev dependencies: npm install while current directory is bootstrap repo


  • Build the whole project: grunt - this will run lint, test, and concat targets
  • To build modules, first run grunt html2js then grunt build:module1:module2...:moduleN

Check the Grunt build file for other tasks that are defined for this project.


  • Run test: grunt watch

This will start Karma server and will continously watch files in the project, executing tests upon every change.


  • Bump up version number in package.json
  • Commit the version change with the following message: chore(release): [version number]
  • tag
  • push changes and a tag (git push --tags)
  • switch to the gh-pages branch: git checkout gh-pages
  • copy content of the dist folder to the main folder
  • Commit the version change with the following message: chore(release): [version number]
  • push changes
  • switch back to the main branch and modify package.json to bump up version for the next iteration
  • commit (chore(release): starting [version number]) and push
  • publish Bower and NuGet packages

Well done! (If you don’t like repeating yourself open a PR with a grunt task taking care of the above!)

Related Repositories



Angular.js Mobile UI Framework with Bootstrap 3 ...



A complete AngularJS service with controllers and templates for generating application modals and dialogs for use with Angular-UI-Bootstrap and Twitter Bootstrap ...



Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating ...



An AngularJS lightbox built using UI Bootstrap Modal. ...



Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router ...

Top Contributors

pkozlowski-opensource ajoslin bekos petebacondarwin joshdmiller SidhNor chrisirhc ericzou just-boris Paulche antonellopasella mokesmokes chicoxyzzy amirhhz anton-dev-ua alachaum arve0 Charuru DanWahlin eddiemonge eweast gsklee typesafe gnesher ianjosephwilson jbruni jimrollenhagen thisboyiscrazy jonbcard Sanjo


-   0.4.0 zip tar
-   0.3.0 zip tar
-   0.2.0 zip tar
-   0.1.0 zip tar