Search code examples
javascriptangularjstwitter-bootstrapangular-ui-bootstrapangular-strap

Best way to combine AngularJS and Twitter Bootstrap


I would like to combine AngularJS and Twitter Bootstrap into a fresh web app. It seems like AngularJS directives have been written for Bootstrap.

However, on careful look, it seems that these directives don't cover all of Bootstrap. Can I combine both the AngularUI Bootstrap code with the original Bootstrap to get completeness? Can it be done in the first place?

I stumbled on another Angular project called AngularStrap. Can I combine all three?

What is the best way to combine AngularJS and Twitter Bootstrap to get completeness?


Solution

  • Generally, the CSS part of Bootstrap works exactly the same way with AngularJS as it works with the Bootstrap JavaScript. So as long as you only want to use Bootstrap CSS, you do not have to think about it.

    For almost all of the Bootstrap JavaScript functionality, AngularUI provides an alternative approach. E.g. the navbar in general works with CSS only, so just look at the Bootstrap docs and implement it. If you require some responsive features for the navbar, you will require the collapse directive; for an example see here: angular-ui navbar

    So if you think anything is missing in AngularUI, could you please be more specific with "are not complete enough to cover the entire Twitter Bootstrap"? I do not have the impression that there is a general gap.

    Moreover, http://angular-ui.github.io/bootstrap/ is the most mature library for the task. So if you think there are features missing, I would strongly recommend to patch it and make a pull request.