Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped)

  • By AngularUI
  • Last update: Jan 6, 2023
  • Comments: 16

Project Status (please read)

Due to Angular's continued adoption, our creation of the Angular version of this library, and the the project maintainers' moving on to other things, this project is considered feature-complete and is no longer being maintained.

We thank you for all your contributions over the years and hope you've enjoyed using this library as much as we've had developing and maintaining it. It would not have been successful without them.

UI Bootstrap - AngularJS directives specific to Bootstrap

Gitter Build Status devDependency Status CDNJS

Quick links


Do you want to see directives in action? Visit!

Angular 2

Are you interested in Angular 2? We are on our way! Check out ng-bootstrap.


Installation is easy as UI Bootstrap has minimal dependencies - only the AngularJS and Twitter Bootstrap's CSS are required. Notes:

  • Since version 0.13.0, UI Bootstrap depends on ngAnimate for transitions and animations, such as the accordion, carousel, etc. Include ngAnimate in the module dependencies for your app in order to enable animation.
  • UI Bootstrap depends on ngTouch for swipe actions. Include ngTouch in the module dependencies for your app in order to enable swiping.

Angular Requirements

  • UI Bootstrap 1.0 and higher requires Angular 1.4.x or higher and it has been tested with Angular 1.4.8.
  • UI Bootstrap 0.14.3 is the last version that supports Angular 1.3.x.
  • UI Bootstrap 0.12.0 is the last version that supports Angular 1.2.x.

Bootstrap Requirements

  • UI Bootstrap requires Bootstrap CSS version 3.x or higher and it has been tested with Bootstrap CSS 3.3.6.
  • UI Bootstrap 0.8 is the last version that supports Bootstrap CSS 2.3.x.

Install with NPM

$ npm install angular-ui-bootstrap

This will install AngularJS and Bootstrap NPM packages.

Install with Bower

$ bower install angular-bootstrap

Note: do not install 'angular-ui-bootstrap'. A separate repository - bootstrap-bower - hosts the compiled javascript file and bower.json.

Install with NuGet

To install AngularJS UI Bootstrap, run the following command in the Package Manager Console

PM> Install-Package Angular.UI.Bootstrap

Custom build

Head over to and hit the Custom build button to create your own custom UI Bootstrap build, just the way you like it.

Manual download

After downloading dependencies (or better yet, referencing them from your favorite 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.

Adding dependency to your project

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']);

Webpack / JSPM

To use this project with webpack, follow the NPM instructions. Now, if you want to use only the accordion, you can do:

import accordion from 'angular-ui-bootstrap/src/accordion';

angular.module('myModule', [accordion]);

You can import all the pieces you need in the same way:

import accordion from 'angular-ui-bootstrap/src/accordion';
import datepicker from 'angular-ui-bootstrap/src/datepicker';

angular.module('myModule', [accordion, datepicker]);

This will load all the dependencies (if any) and also the templates (if any).

Be sure to have a loader able to process css files like css-loader.

If you would prefer not to load your css through your JavaScript file loader/bundler, you can choose to import the index-nocss.js file instead, which is available for the modules:

  • carousel
  • datepicker
  • datepickerPopup
  • dropdown
  • modal
  • popover
  • position
  • timepicker
  • tooltip
  • typeahead

The other modules, such as accordion in the example below, do not have CSS resources to load, so you should continue to import them as normal:

import accordion from 'angular-ui-bootstrap/src/accordion';
import typeahead from 'angular-ui-bootstrap/src/typeahead/index-nocss.js';

angular.module('myModule', [accordion, typeahead]);


Pre-2.0.0 does not follow a particular versioning system. 2.0.0 and onwards follows semantic versioning. All release changes can be viewed on our changelog.



Code of Conduct

Take a moment to read our Code of Conduct


If you're updating your application to use prefixes, please check the migration guide.

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.

Need help?

Need help using UI Bootstrap?

Please do not create new issues in this repository to ask questions about using UI Bootstrap

Found a bug?

Please take a look at and submit your issue here.

Contributing to the project

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

Development, meeting minutes, roadmap and more.

Head over to the Wiki for notes on development for UI Bootstrap, meeting minutes from the UI Bootstrap team, roadmap plans, project philosophy and more.



  • 1

    feat(popover): support template url for partial

    As requested in #202 by @joshdmiller here's my request for external partial support for popover which would make popover much more versatile and lower the need of duplicate code in the apps. Already working implementation can be found in one of the "competing" Bootstrap implementations at

  • 2

    feat(popover): support templates

    Update: This is ready to merge. ~~Here's a poll for anybody to get involved in voting to name this directive: Thank you. It'll be called popover-template and tooltip-template.

    Update: I finally got to this. This should be ready for testing.


    • [x] Needs Tests
    • [x] Needs documentation
    • [x] Doesn't support live updating of the positioning after the template has been reloaded
    • [x] Doesn't support changing of the template URL (there's no watcher)

    This is a proof of concept to use a tooltipController to transclude a template.

    It's based off #1600 and most of the changes are from that. See for actual changes for the popoverWindow. record

    Tests are missing but I wanted to open this up for discussion or comment.

    Fixes #220

  • 3

    refactor(): Support bootstrap 3.0

    Hi guys, thanks for your nice work. I would like to ask you when do you start support bootstrap 3.0. Some directives work some don't. E.g. modal doesn't work.

    I am developing new app but for me (IMHO for many other developers too) is better to start to build new project on BS3 WIP version because I hope it come sooner then I finish my app.

    I would like to propose create BS3 branch now and start to modify directives for it.

    What do you think about it?

  • 4

    Modal Dialog doesn't fade out

    Under certain circumstances, the modal dialog will simply disappear instead of fading out (even though it successfully fades in).

    The example in the documentation is what it should do (fade in and out).

    Ironically, the plunker link it generates shows the modal not properly fading out. I've saved my own to serve as an example here: [Edit from @chrisirhc to reduce confusion: Please take note that the above Plunker does not include angular-animate. As such, no animations should be seen. This is a new requirement for animations, see README.]

    I have the same issue in a separate project of mine where I am handling the modal differently but have the same bug. I can provide the 2nd example if it would help but I imagine the plunker should be enough.

    The bug appears to be browser independent as it occurs both when I use Chrome v42.0.2311.135 m and in the developer edition of Firefox (39.0a2).

    UPDATE: Note that the plnkr is using the latest version of angular-ui (0.13.0) and the latest supported version of angular (1.3.13). This is not about angular 1.4.

  • 5

    Modal backdrop broken with bootstrap 3.3.1

    IMPT Read bottom message, Bootstrap update has likely fixed this

    To be more precise, broken due to this commit:

    Temporary workaround: override new css code with older one

  • 6

    feat(dialog): rewrite $dialog

    I think that at this point it is cleat to everyone that the current $dialog service got in a state where it is hardy maintainable. There are tons of issues opened for it and some of the design decisions make it impossible to move forward with the current code.

    I'm in the process of re-writing the current service and the modal directive, will try to push the first version for review over the weekend (if everything goes as planned).

    Going to close all the existing issues for $dialog and 'modal' as a duplicate of this one.

    As a reminder, early draft of the design is available here:

    @ajoslin I'm not sure if keeping is as gist is the best thing at the moment as I can't easily modify it. Not sure how to progress - I can fork of course but how do we merge all the versions? Anyway I will be working on the forked gist for now.

  • 7

    Proposition for typeahead : Open suggestion view on focus

    It could be interresting to automatically open the suggestion view when the input field has focus.

    It will allow user to see choices it can make when a filter is used and the list is not editable.

    What do you think about ?

  • 8

    $modal breaks forms b/c of transclusion

    Say I instantiate a modal:

      controller: 'MyCtrl'

    In my modal, I have a form:

    <form name="myForm">...</form>

    Because of transclusion, myForm is not available on MyCtrl's scope and I can't check for $valid, for example. A workaround I've found is to simply put an ng-controller="MyCtrl" within my modal template itself, and do this:

      controller: function($scope, $modalInstance) {
        $scope.$modalInstance = $modalInstance;

    ...and now I can get to the instance from within MyCtrl.

    This is not ideal, but I'm not sure of what the fix should be. Instead of transclusion, would it be a good idea to actually insert an ngController directive within the template/modal/window.html template itself then say, ngTransclude within a child tag? Any better way to tackle this problem?

    thanks Chris

  • 9

    hide tooltips and popovers when a user clicks away

    hide triggers when a click occurs that does not target the popover/tooltip link and does not target elements with the popover/tooltip classes

    This solves issue #1055 and helps with similar issues (#618, #590, #749, #751)

    Let me know if this is something that's desired and if an option needs to be added for toggling this behavior.

  • 10

    Positioning Angular UI bootstrap Datepicker

    Hi. As I explained in my case in Stack Overflow ( I am having a problem with the positioning in the datepicker. It always appears below the input that invoke it from the bottom left corner. But if the input is close to the right border of the page, the datepicker is cut and a horizontal scroll appears.

    I am writing because I think it would be a nice feature to handle the alignment in the datepicker configuration.

    Hoping you take this into consideration

    Kind Regards Andrey Bottoni

  • 11

    `$` compatibility with component (`angular.component` method)


    I want to ask if you're considering support of angular.component method which is new API for creating components.

    I'd like to have the ability to call $ method with the component definition. Now I have to specify controller and template options...

    My API proposal:

    angular.module('myApp').component('myModal', {
      bindings: {
        greeting: '<'
      template: '<div>{{$ctrl.greeting}}</div>',
      controller: function () {},
    // open the modal
      component: 'myModal',
      bindings: {
        greeting: 'hello',

    Thanks for response.


  • 12

    [BUG] UIBS 2.5 UibModal doesn't close correctly

    Bug description:

    Hello, I got some trouble with uib modal, Sometimes, it's totally random, when I close modal using $uibModalInstance.close(smth) method, it doesn't close properly. I saw lot's of the same issue but can't find the same setup as mine. And as a said it's totally random, i can't reproduce it to make it work 100%.

    Link to minimally-working plunker that reproduces the issue:

    Here's a plunker reproducing my issue with older version, I don't want to use older version of angular or UIBS

    Steps to reproduce the issue:

    Here's my code: Call modal Method:

    var modalInstance = ${
                        animation: true,
                        controller: 'ModalInfoMouvementCtrl',
                        templateUrl: '/otawa/infomouvement',
                        size: 'lg',
                        backdrop: 'static',
                        keyboard: true,
                        resolve: {
                            param: function () {
                                return { mouvement: mvt };
                    modalInstance.result.then(function (mvt) {
                        if (mvt != null) {
                            var respa = mouvementSrv.getMouvementById(;
                            respa.then(function (response) {
                                var mvt = convertMouvementData(;
                                $scope.listMouvement[index] = mvt;
                                $scope.selectedmvt = null;
                            }, function (err, status) {
                                $toastr.error(, 'Erreur');
                    }, function () {

    Closing method on other Controller :

      $scope.close = function (mvt) {

    Calling modal on button click, then when i finish to fill my form inside the modal, it fade out but I can't click anywhere, and if I inspect HTML i can see the modal HTML. image

    Set animation false do not solve the bug.

    Any suggestion of what could be wrong ?

    Version of Angular, UIBS, and Bootstrap

    Angular: 1.5.6 Angular Animate : 1.5.6

    UIBS: 2.5.0

    Bootstrap: 3.3.7

  • 13

    Popover trigger="outsideClick" not closes popover on mobile(IOS)

    Bug description:

    I'm using a uib-popover with outsideClick trigger. The popover outsideClick trigger works except on mobile(tested on iOS)

    Steps to reproduce the issue:

    Click link to open a popover Click in an outside area

    Popover should disappear and now its not.

    Version of Angular, UIBS, and Bootstrap




  • 14

    fix(datepicker): initDate does not change

    Closes 6636

    change the datepicker activeDate so it uses a copy of the initDate instead of a reference to initDate. This way when the user clicks Next or Previous, activeDate changes but initDate does not.

  • 15

    [$compile:tpload] Failed to load template: uib/template/modal/window.html (HTTP status: 404 Not Found)

    Bug description:

    I've added ui-bootstrap to an angular 1.x project and getting this error when I want to open a modal form

    [$compile:tpload] Failed to load template: uib/template/modal/window.html (HTTP status: 404 Not Found)

    I've used ui-bootstrap before and always it worked well but in my new project I have problem with it.

    the code is like : ${ backdrop: 'static', templateUrl: 'DesktopModules/' + window.GLOB.moduleFolderName + '/app/form/form.html', controller: 'requestCtrl', size: 'sm', scope: $scope }); angular ver : v1.5.8

    UIBS: v2.2.0

    Bootstrap: v3.3.7

  • 16

    datepicker - initDate getting updated when navigating control

    The issues forum is NOT for support requests. It is for bugs and feature requests only. Please read and search existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

    Bug description: As the user navigates the datepicker control, the initDate is updated. This causes issues if you use the the current date of one datepicker as the initDate of another.

    Also, note how the Start Date control itself doesn't change, but the model value does.

    Expected: initDate is essentially readonly.

    Link to minimally-working plunker that reproduces the issue:

    Steps to reproduce the issue:

    As noted in the Plunker, simply navigate forward or backward by month in the End Date datepicker and note how the Start Date value changes.

    Version of Angular, UIBS, and Bootstrap

    Angular: 1.6.1

    UIBS: 2.5.0

    Bootstrap: 3.3.7