In this tutorial, we will explain to you how to install bootstrap 4 in angular 11. we will give you a simple example of how to add bootstrap in angular 11. Let’s talk about installing Bootstrap in angular 11. You only need to follow a few steps to install Bootstrap 4 in angular 11.
Table of Contents
Create new angular app
We will create a new angular app using the following command.
|
1 2 |
ng new myapp cd myapp |
Install bootstrap 4 in angular
After the configuration of the application, we need to install the bootstrap and jquery using the below command.
|
1 |
npm install bootstrap --save |
|
1 |
npm install jquery --save |
We have to add the bootstrap CSS and jquery path into the angular.json file. so first we will add that path into the angular.json file.
angular.json
|
1 2 3 4 5 6 7 8 |
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] |
Update view file in angular
In this component file, we will create a simple example of bootstrap 4. so you can see the below code.
src/app/app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container"> <h2>Button Outline</h2> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light text-dark">Light</button> </div> |
Run Our Angular Application
Now we will run our Angular application using the below command.
|
1 |
ng serve |
