How To Install Bootstrap in Angular Application?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Here now today in this post, i will give you an example of how to install bootstrap in our angular js project. We can easily install bootstrap in our angular js application. Here i will also give you an example of how to use bootstrap in our angular 8 application. We can easily know about how to install angular 8 and bootstrap 4 and how can use it.

As we know that Bootstrap is one of the most popular framework for building the responsive, and aslo mobile-first sites. So bootstrap provide us the several class for making responsive website for our mobile. So if we want to use bootstrap with angular 8 project than here i will help you on very simple way.

Just we need to install bootstrap and then use it with our angular 8 project. So here i will give you two simple way example in bellow.

We can easily create our angular app by using bellow command:

ng new my-new-app
Example 1:

Now in this solution, we also need to install bootstrap also with jquery and popper js. So on that way we can also import the bootstrap css and bootstrap js function. So i think on this will be best solution for us as i think.

So let’s run the following commands:

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

So after the 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"
            ]
          },
          .....
Example 2:

Now In this solution, we need to just install the bootstrap on our angular 8 and then need to import css file to style.css file. So on this is only for the css importing. So we need to run command bellow:

npm install bootstrap --save

Ok, good now we need to import our bootstrap css on our style.css file as like as bellow:

src/style.css

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

Now we can use the bootstrap class in our angular 8 application.I hope It will works.

Read Also: How we can create virtual host in ubuntu apache?

Thanks for read. I hope it help you. For more you can follow us on facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →