Install bootstrap 4 in angular 11 with example

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.

Create new angular app

We will create a new angular app using the following command.

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.

npm install bootstrap --save

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

"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

<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.

ng serve