Bootstrap is a free and open source front-end web development framework. It is a giant collection of HTML, CSS, and JavaScript code that is designed to help build user interface components. It is a free collection of tools for creating websites and web applications. It is used by many developers and according to the official Bootstrap site: It is the most popular HTML, CSS, and Javascript framework to create responsive mobile-first websites and web applications. It has several versions with the latest being CSS 4.
History: It was originally designed by a Twitter employee, and was known as Twitter Blueprint. In 2011, its official version was launched with the name Bootstrap.
Why use it?
There are many reasons why bootstrap is leading the web frameworks race, some of them are:
- Reusability: Bootstrap contains ready-made components, CSS styles, and plugins that can be included directly in our code. Hence we can make use of these components and styles in our code, which will save time and helps in the rapid development of the website/web app.
- Mobile-first: The main priority when we make a website using bootstrap is to be mobile responsive. Mobile-first basically means that we build the website from a smartphone level and then scale it up to conform to the bigger sizes.
- Easy to get started: It is easy to get started as it only requires the knowledge of HTML and CSS only.
- Open source: It is open source in nature and completely free to download.
- Great Grid system: Bootstrap makes use of the powerful 12-column grid system which is easy to use and very consistent.
Example: This example illustrates the basic Bootstrap Card implementation using the required CDN links.
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
</head>
<body style="text-align: center;">
<div class="container mt-3">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Bootstrap Example</h3>
<div class="container mt-3" style="width: 600px;">
<div class="card">
<div class="card-body">
GeeksforGeeks - Learning Together!
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
AngularJS is a Javascript open-source front-end framework that is mainly used to develop single-page applications(SPAs). It is a continuously growing and expanding framework which provides better ways for developing web applications. It changes the static HTML to dynamic HTML. Its features like dynamic binding and dependency injection eliminate the need for code that we have to write otherwise.AngularJs are rapidly growing and because of this reason, we have different versions of AngularJs with the latest stable being 1.7.7. It is also important to note that Angular is different from AngularJs.
History: AngularJS was originally developed in 2008-2009 by Miško Hevery and Adam abrons at Brat Tech LLC, as software for the online JSON storage service, in order to ease to development of the applications for the enterprise, that has been valued by the megabyte. It is now maintained by Google. AngularJS was released with version 1.6, which contains the component-based application architecture concept. This release version removed the Sandbox, which facilitates the security, despite having the various vulnerabilities that have evolved, which bypassed the sandbox.
Why use it?
- Easy to work with: All you need to know to work with AngularJs is the basics of HTML, CSS, and Javascript, not necessary to be an expert in these technologies.
- Time saving: AngularJs allows us to work with components and hence we can use them again which saves time and unnecessary code.
- Ready to use the template: AngularJs is mainly plain HTML, and it mainly makes use of the plain HTML template and passes it to the DOM and then the AngularJS compiler. It traverses the templates and then they are ready to use.
Example: This example illustrates the basic Angular JS by implementing the directive, controller, etc.
<!DOCTYPE html><html>
<head>
<title>AngularJS Example</title>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>AngularJS Example</h3>
<div ng-app="myApp"
ng-controller="myCtrl"
ng-style="gfgObj">
<input type="text" ng-model="comName">
<input type="text" ng-model="detail">
<br> {{comName + " "+detail }} </div>
</center>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.comName = "GeeksforGeeks";
$scope.detail = "Learning Together!"
$scope.gfgObj = {
"color": "green",
"font-family": "sans-serif",
"font-size": "25px"
}
});
</script>
</body>
</html>
|
Output:
Key Difference between Bootstrap and AngularJS: AngularJS being a javascript framework gives us everything that is required for front-end development. It manipulates the DOM(Document object model) by extending HTML and its directives. It is mainly used to make web apps, as it provides all the necessary components and data binding techniques which makes it a suitable framework to use, whereas when we consider Bootstrap we know that it was developed by members of Twitter as a style guide initially, and is mainly used to make the websites more responsive with clean UI.
Differences between AngularJS & Bootstrap:
AngularJs |
Bootstrap |
|---|---|
|
AngularJs is developed and maintained by Google. |
Bootstrap is designed and developed by a core team of twitter. |
|
AngularJs is used in Mobile App development. |
Bootstrap is used in Mobile App development. |
|
AngularJs is a JavaScript framework. |
Bootstrap is not a javascript framework. |
|
AngularJs is not a CSS framework. |
Bootstrap is a CSS framework. |
|
AngularJs is not responsive-oriented. |
Bootstrap is responsive-oriented. |
|
AngularJs provides two-way data binding in. |
In Bootstrap Two-way data binding is not an option |
|
Elements cannot be easily arranged on a page |
In the case of Bootstrap, this can be done easily as there is flexbox support present. |
|
AngularJs has a better templating engine when compared to Bootstrap. |
Bootstrap does not have much powerful template engine. |
|
AngularJs has a routing facility. |
Bootstrap does not have a routing facility. |
|
AngularJs provides dependency injection. |
Bootstrap does not provide dependency injection. |