How to install bootstrap 4 in angular 9 | 8 | 7 | 6 | 5 | 4
Bootstrap is used to design websites more beautiful. It is responsive framework for HTML and CSS.
Bootstrap
Bootstrap is used to design websites more beautiful. It is responsive framework for HTML and CSS. Bootstrap having html css responsive templates to design more attractive website. It is very faster and easier framework to design websites.
How to install bootstrap in angular framework ?
Prerequisite
- Angular Cli. To install angular cli click here.
Setup
To Install bootstrap their is two methods available.
- Install bootstrap using node package manager (NPM).
- Install bootstrap using content delivery network (CDN).
Method 1
Install bootstrap using node package manager (NPM).
The command is used to install bootstrap using npm in angular project is
npm install bootstrap --save
If you want to install the version of bootstrap use this command
npm install bootstrap@4.3.3 --save
In the above command the version is mentioned after the @ sign which indicates to node package manager install bootstrap of version 4.3.3
Method 2
Install bootstrap using content delivery network (CDN)
To download CDN go to main bootstrap site. Click here to go official website.
Apply Bootstrap to Project
Method 1
After installation done using npm. Then after add the bootstrapp min css and js to angular json file
//project_name > angular.json "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.css", ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.js" ]
Some time bootstrap need jquery also so install it using
npm install jquery --save
After install jquery successfully add jquery js file to angular josn file
//project_name > angular.json "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.css", ], "scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/bootstrap/dist/js/bootstrap.js", ]
Boostrap setup completed you can use bootstrap to your project.
Method 2
Install bootstrap using content delivery network (CDN). You need CDN link to add this link to angular index.html file.
To download the CDN file click here.
Add this CDN to angular index.html file
// src > index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>DemoForArticle</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <app-root></app-root> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
Some time bootstrap need jquery also so add it using jquery CDN, to get jquery cdn go to link.
After taking the CDN add to your index.html file to support jquery to bootstrap.
// src > index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>DemoForArticle</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- Bootstrap CSS CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <app-root></app-root> <!-- Jquery JS CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Bootstrap JS CDN --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
Boostrap setup completed you can use bootstrap to your project.
You can use bootstrap using NG Bootstrap. To see how to use NG Bootstrap use this article.
To see bootstrap is successfully installed to your angular project or not.
Add the bellow code to your component html file
// src > app > app.component.html <div class="container-fluid"> <div class="jumbotron text-center mt-lg-5"> <strong> Hi you have successfully installed bootstrap. Thankyou for seen this article. </strong> </div> </div>
Output
Thank you for watching this article.
Popular Post

Sign in to stay updated on your professional world.
Pro Code Programming
Share and learn to code!
Programming articles, which helps you to build your application.
If something you are stuck to code and complete the program, just find here your quetion related articles.