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

By Hardik Savani | November 20, 2019 | | 2490 Viewer | Category : Bootstrap AngularJS


Here, i will give you example of how to add bootstrap 4 in angular 8 project. you can easily install bootstrap in angular 8. i will also give you example of how to use bootstrap in angular 8. you can easily understand angular 8 install bootstrap 4 and use it.

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 8 than i will help you very simple way.

I have a two install bootstrap and use it with your angular 8 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 8 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 8 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

{

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",

"version": 1,

"newProjectRoot": "projects",

"projects": {

"my-app": {

"projectType": "application",

"schematics": {},

"root": "",

"sourceRoot": "src",

"prefix": "app",

"architect": {

"build": {

"builder": "@angular-devkit/build-angular:browser",

"options": {

"outputPath": "dist/my-app",

"index": "src/index.html",

"main": "src/main.ts",

"polyfills": "src/polyfills.ts",

"tsConfig": "tsconfig.app.json",

"aot": false,

"assets": [

"src/favicon.ico",

"src/assets"

],

"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 use bootstrap css and js both.

Now you can check your angular 8 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: