How to Add Bootstrap to Angular : In this article , we will tell you the best way to add Bootstrap to the Angular application. This instructional exercise utilizes Bootstrap 4 and Angular 9. We will tell you the best way to introduce the bootstrap CSS.
What is Bootstrap:
Bootstrap consists of few CSS files & JS files.
The CSS files contains all the styles definitions.
bootstraps.js file. It also has dependency on jQuery, Popper.js.
Step 1 : Create a new Angular Application –
ng new Bootstrap-example
Step 2 : Adding Bootstrap CSS File –
We can introduce the Bootstrap CSS document in one of the accompanying ways
- You can use the CSS file from a CDN
- Also, copy the
bootstrap.min.cssfile to a local folder
- Install the bootstrap npm package
Once introduced, you can remember it for the application by utilizing the one of the techniques
- You can add it in
index.htmlusing the link tag
- Alos, include it in
- Import it in
Add Bootstrap using the CDN –
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap CSS Example</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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"> </head> <body> <app-root></app-root> </body> </html>
Alternatively, you can use the
@import directive in the
Install the bootstrap package :
This way is recommended to everyone to add Bootstrap to Angular :
Run the following command to install the latest version of Bootstrap to your Application.
npm install --save bootstrap
This will add the bootstrap files to the
angular.json file and locate the
Bootstrap-example (your project name) ->
"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],
Also, you can just add the @import directive to import it in the
Step 3: Run your app using the following command