Install Bootstrap 4 in Angular 9 | How to Add Bootstrap in Angular 9

By Hardik Savani | February 23, 2020 | Category : Angular


I am going to explain you example of how to install bootstrap in angular 9. we will help you to give example of how to add bootstrap 4 in angular 9. you can see how to use bootstrap in angular 9. you can understand a concept of angular 9 install bootstrap 4. You just need to some step to done angular 9 add bootstrap 4.

As we know Bootstrap is the world’s most popular framework for building responsive, and mobile-first sites. bootstrap provide several class for making responsive website for your mobile. So if you want to use bootstrap with angular 9 than i will help you very simple way.

I have a two install bootstrap and use it with your angular 9 project. i will give you both way example bellow.

You can easily create your angular app using bellow command:

ng new my-new-app

Example 1:

In this solution, you need to just install bootstrap on your angular 9 and import css file to style.css file. this is only for css importing. so you can run command bellow:

npm install bootstrap --save

Ok, now you need to import your bootstrap css on style.css file as like bellow:

src/style.css

@import "~bootstrap/dist/css/bootstrap.css";

Now you can use bootstrap class in your angular 9 app. It will works.

Example 2:

In this solution, we will also install bootstrap with jquery and popper js. so that way you can also import bootstrap css and bootstrap js function. So i think this will be best solution for you i think.

let's run following commands:

npm install bootstrap --save

npm install jquery --save

npm install popper.js --save

Now after successfully run above command. let's import it in 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"

]

.....

Now you can easily use bootstrap class as like bellow:

src/app/app.component.html

<div class="container">

<h1>Install Bootstrap 4 in Angular 9 - ItSolutionStuff.com</h1>

<div class="card">

<div class="card-header">

Featured

</div>

<div class="card-body">

<h5 class="card-title">Special title treatment</h5>

<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>

<a href="#" class="btn btn-primary">Go somewhere</a>

</div>

</div>

</div>

Now you can use bootstrap css and js both.

Now you can check your angular 9 project.

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: