The real (or hidden) difference/s between Twitter bootstrap and Angular.js

I've just been comparing these 2 frontend frameworks and from what I can tell, they seem to do the exact same thing in terms of providing the dev with an HTML, CSS and JS frontend.

Boostrap: Sleek, intuitive, and powerful front-end framework for faster and easier web development. (over 53 000 starred on GitHub)

Angular.js: AngularJS is a structural framework for dynamic web apps. (12 000 starred on GitHub)

The ratings mean nothing, but I just thought I'd put it in there to show that this isn't some 'quickie' question that I didn't research.

From what I've understood of Angular through wikipedia, it aims to completely separate the frontend design/layout/ui from the backend - where the database is, the web server is and where the business logic happens.

From what I understand of bootstrap (with its JS) you can achieve this exact same thing.

The angular site mentions:

> Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

Now I'm not sure if they're taking potshots at something like backbone or maybe even bootstrap (and if you get offended easily, then ignore the potshots comment), but to me, I just can't make out what real and true differences there are between the 2.

Maybe there's some advanced info about the DOM or some other minute/tiny aspect/s of JS or HTML that make the 2 different, but I just don't see it.

PS. No SOF question like this exists, nor do any blogs speak about it (unless it is ranked very low or I'm asking the wrong way).

I also discovered that some people are working on porting over aspects of bootstrap to angular.

Edit: Thinking about it, I realized that bootstrap offers that resizing option for different screen views, I'm not sure if angular does. If not, is that the only difference?

Bootstrap is a design framework, for building easy, beautiful looking components and responsive design. It also has basic js components that makes life of any developer easier, prominently of a backend developer, who is not very experienced with HTML design rules.

So, just put the css, check the examples, and replicate it in your project. That's the major flow with Bootstrap.

Angular, is a JS framework, for building complex web apps. It comes in line with Backbone, Ember Js.

Take a simple example of a form, where you wish to make an ajax call on Submit. Now you can make the form, beautiful, by Bootstrap CSS, but you need to make use of javascript or in this case , angular, to make the ajax call and do the required functionality.

These go hand in hand in web apps, they are not competitors.

Bootstrap and AngularJS are 2 very different frameworks.

From SO tags-info

Twitter-Bootstrap > Bootstrap is a front-end framework from Twitter designed to kickstart > development of webapps and sites. Among other things, it includes base > CSS and HTML for typography, icons, forms, buttons, tables, layout > grids, navigation along with custom-built jQuery plug-ins and support > for responsive layouts.

AngularJS

> AngularJS is an open-source JavaScript framework for building CRUD > centric AJAX style web applications. Its goal is to shim the browser > to augment the HTML vocabulary with directives useful for building > dynamic web-apps. > > Angular ships with directives which add 2-way databinding, DOM control > and unrolling, code-behind DOM, form validation, and deep-linking.

From what I understand of bootstrap (with its JS) you can achieve this exact same thing.

No the same thing cannot be achieved by bootstrap. AngularJS gives you features like, 2-way data binding, deep linking, routing, transition animations and a lot lot more. Where as bootstrap provides custom jquery based plugins, cool look and feel, css classes for media queries etc. They are awesome together as angular can be used along with other libraries.

Angular & Bootstrap First of all, Angular and Bootstrap are not alternatives, but complimentary. It means that one is not substituted by the other, but they can be combined together and can complement each other. In other words, they handle different aspects of web application. Therefore, they are not comparable in any sense. However, the difference and similarity between them can be illustrated by following bulleted points.

What is Angular?

• developed and maintained by Google
• comprehensive client side (friend-end) JavaScript framework
• made for ambitious JavaScript Single Page Applications
• provides set of components to structure your app and organize the project
• the logic layer for the front end wrapped up nicely in the form of modules, directives, data binding

What is Angular not?

• not to provide CSS styles, grid classes or JavaScript components (like Modal, Tabs, Navigation Bar, Dropdown menu)

What is Bootstrap?

• developed by Twitter and now open-sourced
• a set of well-structured CSS styles, Grid classes and JavaScript components help with animations, creating nice looking widgets (have to write on your own otherwise)
• handy to build Responsive design well suited for small projects without much customization and development efforts

What is Bootstrap not?

• not to provide structure to application
• not to provide common functionality (like routing, controllers and models, MV* architecture)

In Common (Angular & Bootstrap)

• friend-end frameworks
• immense open source support
• come with a set of pre-defined components to fasten/ease the development

In Contrast (Angular Vs Bootstrap)

• JS (structural) framework vs CSS (theming) framework
• handles Logic vs deals with Style
• robust framework vs small-scaled framework
• for Single-Page Applications vs for any structure

Great answer @tony Puthenveettil To add (and taking it at 5000 feet level). Lets assume your website as your own , physical departmental store. The design of your departmental store will have to major areas:

1. How you would like to compartment-a-lize your store into various sections like : a. milk and breakfast b. chips and choclates c. cererls and whole foods d. meat and chicken

2. How do you create the layout of each section

While some of you may think that why do we need to compartment-ing your store. But eventually, its very important. Because it would lot easier to manage and maintain your stuff.

Just imagine your store has no order and different items are placed in different areas

e.g. you are finding meat fridge next to chocolates. odd eh ? Difficult to manage and maintain. yes !

So we need to compartment-ization of your various sections.

Now lets jump to how each section looks like . You may want to put different messaging and different look for organising chocolates compared to meat. While your meat section may big refrigerators, your chocolates section may have open trays !

So your compartment creation and maintainance is what Angular helps in. A fridge or an open tray, is what bootstrap is!