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:
The bootstrap is a responsive mobile-first CSS framework for building Web Applications. It is open source and has all the features like Sass variables, mixings, responsive grid system, prebuilt components, and powerful JavaScript plugins.
Bootstrap consists of few CSS files & JS files.
The CSS files contains all the styles definitions.
Many of bootstrap components require the use of JavaScript to function. For Example, carousels, drop-down menus, auto-suggest, etc require 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 –
Assuming you are not utilizing any of the components that utilization JavaScript, you don’t have to introduce JS documents. There are a couple of manners by which you can add the CSS Files.
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
angular.json - Import it in
styles.css
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 styles.css file
@import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
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 node_modules/bootstrap directory.
Open the angular.json file and locate the projects -> Bootstrap-example (your project name) -> architect -> build -> styles node.
"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 styles.css
@import "~../node_modules/bootstrap/dist/css/bootstrap.min.css";
Step 3: Run your app using the following command
ng serve
