Bootstrap is world’s most popular front-end component library.
You can build responsive, mobile-first projects on the web with the bootstrap.
Bootstrap is an open source toolkit for developing web applications using HTML, CSS, and JS.
Quickly prototype your ideas or build your entire app with bootstrap Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Using bootstrap you can quickly develop Angular front-end UI.
So let’s see the ways, to use bootstrap in angular application
There are two ways to use bootstrap in an angular application.
- Using Bootstrap CDN
- Installing Bootstrap libraries in Angular Application.
Bootstrap CDN is an easy and quick way to use bootstrap in your application.
You just need to add below CSS and JS files in index.html of Angular application
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
Generally, this is a good way, if your application is running on the internet and if it is allowed to use external CSS and Scripts in your organization.
But if either of above is not valid then you need to install bootstrap in your application, after downloading the npm modules.
To install bootstrap in your Angular CLI application run below command in your project directory.
npm install --save [email protected]
For the latest stable version installation run below command
npm install --save bootstrap
Note :
--save in npm install command will also make entry of [email protected] in the package.json
After executing above command you will get below result.
Bootstrap is dependent on jQuery and Popper.js library, so if you have not installed jquery and popper.js before in your application, then you need to also install this two libraries.
To install jQuery in your application, execute below command
npm install --save jquery
and to install popper.js, execute below command
npm install --save popper.js
For Angular 6+ project generated using Angular CLI 6+, include following .css file in the styles array property of angular.json
Note : In Angular CLI 6+, angular-cli.json is replaced with angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
], As well as, include following .js files in the scripts array property of angular.json
"scripts": [ "node_modules/jquery/dist/jquery.slim.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ],
- Note
For Angular 5 or lower version application, include following .css file in the styles array property of .angular-cli.json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
], As well as, include following .js files in the scripts array property of .angular-cli.json
"scripts": [ "../node_modules/jquery/dist/jquery.slim.min.js", "../node_modules/popper.js/dist/umd/popper.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
Now serve the application using ng serve command. You can see in the below output, fonts of headers and text are changed.
As shown below, Bootstrap is successfully installed, now you can build User Interface using bootstrap component.
