5

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,

ccccccc
  • 99
  • 3
  • 9
  • Have a look at this question too: http://stackoverflow.com/q/16327846/79485 – Marcel Feb 11 '14 at 07:29
  • The answers to this question will help you understand the underlying problems: http://stackoverflow.com/q/19350661/79485 – Marcel Feb 11 '14 at 07:30
  • Given the comments above, I have to say that I mix the two without problems yet, and not using any bootstrap specific directives: You may have a look at my project here: http://quir.li – Marcel Feb 11 '14 at 07:32

2 Answers2

11

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.

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

Fresheyeball
  • 29,567
  • 20
  • 102
  • 164
  • Hello, Okey thanks for your answer! I will try that Angular bootstrap. Br, – ccccccc Oct 31 '13 at 16:50
  • hey @user2707924, did that work for you? If you found my advice helpful please accept this answer via the green checkmark. – Fresheyeball Nov 12 '13 at 04:34
  • 1
    This answer is now obsolete. AngularStrap is now a re-implementation of the Bootstrap JavaScript using AngularJS 1.2+, taking advantage of `ngAnimate`. The only dependencies are Bootstrap 3.0+ CSS and AngularJS 1.2.9+. UI Bootstrap (by the AngularUI team) is currently based on AngularJS 1.0.8+. – Steve Feb 24 '14 at 09:39
0

There is a separate branch for bootstrap 3.0 which contains the updated templates. It seems to be working with Bootstrap 3.0 CSS: http://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2.

Quote from https://stackoverflow.com/users/1232563/calm on this question Bootstrap 3 compatible with current AngularJS bootstrap directives?

Community
  • 1
  • 1
Tobias Oberrauch
  • 217
  • 6
  • 15