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.

Prerequisites

  1. AngularJS
  2. Bootstrap (js and css)

Note: Only Bootstrap css is required for Bootstrap UI.

Step1

Step2

Include it in your app:

Manually

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.

Step3

Inject it into your main app module.

Step4

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.

Step5

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.

ngHTML

collapse_controller.js

Output

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

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

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 *