How to integrate bootstrap-3.0.1 and AngularJS?

Question

I have a project which should use both AngularJS and Bootstrap(http://getbootstrap.com/) to take Alert and Process Indicator there.

But when I include Bootstrap's css file it mixes Application so, that other css file's definings seems to be overridden.

How these two Frameworks should be used in same Application?

I have tried almost everything I know but haven't succeeded to combine these two in the same application.

Best regards,

Answer 1

DONT. Bootstrap is based on a jQuery powered mentality, that is fundamentally componentized as isolated state machines of DOM manipulation. Angular is based on a radically different thought process based around Angular $digestion, and HTML compilation.

If you must combine them, do CSS ONLY. Having two sets of state machines with an adapter introduces overhead and room for human error that does not need to exist. I recommend writing your own angular directives that take advantage of Bootstraps CSS, but NOT trying to integrate the two in one application on the JS level.

There are already a few projects out there trying to do this via directives, which is a good idea. I recommend going with a bootstrap directive project that does not depend on jQuery and is a native Angular implementation, rather than adapting Bootstrap's jQuery code into Angular.

• NOT this one : https://github.com/mgcrea/angular-strap/blob/master/src/directives/button.js
• BUT this one : http://angular-ui.github.io/bootstrap/
• or write your own!

---

UPDATE There is now a pure angular version of bootstrap. Find it here -> http://mgcrea.github.io/angular-strap/