How to Add Bootstrap in Angular 8 | Install Bootstrap 4 in Angular 8
In this post we will give you information about How to Add Bootstrap in Angular 8 | Install Bootstrap 4 in Angular 8. Hear we will give you detail about How to Add Bootstrap in Angular 8 | Install Bootstrap 4 in Angular 8And how to use it also give you demo for it if it is necessary.
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…
Hope this code and post will helped you for implement How to Add Bootstrap in Angular 8 | Install Bootstrap 4 in Angular 8. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs