Integrating Bootstrap UI with AngularJS in 2mins

Very quick tutorial on how to integrate Bootstrap UI with AngularJS in a just few minutes. I’ve added some notes to answer common questions which you might be thinking when your installing and trying to get custom directives to work.


  1. AngularJS
  2. Bootstrap (js and css)

Note: Only Bootstrap css is required for Bootstrap UI.



Include it in your app:


Or using Grunt (I’m using Lineman and add it to my config/files.js) then it gets auto compiled by Grunt into app.js.

Note: Inclusion of jQuery is optional.


Inject it into your main app module.


Add this to your CSS to fix a known bug to do with removing hrefs.

That’s it now you can start using the bootstrap directives in your ngTemplates.


If you want to reuse your components you may need to create controllers so each directive gets it’s own controller injected.

For example, you want to include multiple collapse elements on a page.




Now each bootstrap collapse has a controller and uses it’s own isCollapsed variable.

Sam is a passionate web developer from England. In his spare time he enjoys coding, playing chess, reading and investing.

2 thoughts on “Integrating Bootstrap UI with AngularJS in 2mins

  1. Nice write-up but actually it can be done even simpler – since doesn’t have dependency on Bootstrap’s JavaScript, you don’t need to include jQuery nor Bootstrap’s JavaScript. In practice it means that you don’t need to include “vendor/js/core/jquery.min.js” nor
    “vendor/js/core/bootstrap.js”. Maybe it would be good to correct your article?

Leave a Reply

Your email address will not be published. Required fields are marked *