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

Here in this post, I will show you an example of how we can install Bootstrap 4 in Angular 8. In this example, I will guide you on how we can easily perform this task. And how we can easily use it.

You also know bootstrap is a most popular design framework and most developers use that. Bootstrap is very flexible to learn and developed time so many developers choose it. Bootstrap is most popular for responsive design.

Bootstrap provides several classes for making a mobile responsive design. If you want to use Bootstrap in Angular it's a very easy way to install in angular 8.

So, let's do the installation.

Here we first need to get an angular App so you can use the below command and get the application.

ng new my-new-app

Here you can install bootstrap in angular two methods like below.

Method 1 :

In this method, we need to install bootstrap into the Angular 8 application and import CSS file to style.css file. So let's do that using below command.

npm install bootstrap --save

After running the above command we have to import bootstrap CSS into style.css as like below. So let's do that.

src/style.css

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

Now you can run the angular application and use the bootstrap class and make a design.

Laravel 6 - QR Code Generator Example

Method 2 :

In this 2nd method, we will install bootstrap with jquery and popper.js. This is the best way to install bootstrap and you can also import bootstrap CSS and bootstrap js and function. So, I think it's the best solution to the installation bootstrap into angular

So, let's run the following commands and setup.

npm install bootstrap --save

npm install jquery --save

npm install popper.js --save

After installation successfully you need to let's import it in the 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 are ready to run and making a design with bootstrap.

I hope you like this post.

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)