Different ways to install bootstrap 4 in angular application

Bootstrap is most popular css framework for developing responsive and mobile first websites.

In this article, we’ll see different ways to install bootstrap 4 in angular application. Here I’m using angular version 9 in this article.

Table of Contents

Creating Angular project using Angular CLI

Now we’ll create Angular project. The easiest way to create Angular application is using Angular CLI.

So for that, We’ll need to first install the angular cli package. You can install npm package Angular CLI using the following command

Install angular cli


   npm install -g @angular/cli

Generate project

Now generate angular project using angular cli command


   ng new angular-bootstrap4-sample

and then you’ll be asked to choose the stylesheet format, select css format because we’ll install css version of bootstrap and hit enter.

Then Angular CLI will create necessary file and folders and will install the necessary npm packages.

Navigate to project directory


   cd angular-bootstrap4-sample

and then you can use the following command to run the project


   ng serve

Installing Bootstrap 4

Now that we have created angular application, now it’s time to install bootstrap 4.

There are following ways to install bootstrap 4:

Install bootstrap using the npm package
Using Bootstrap CDN
Downloading bootstrap files (Local css)

1. Install bootstrap using the npm package

Install bootstrap using the following command.


   npm install --save bootstrap

The above command will create bootstrap folder under node_modules (node_modules/bootstrap) and which is containing all the assets files in it.

You’ll also need to install jquery.


   npm install --save jquery

2. Using Bootstrap CDN

CSS

copy-paste the following stylesheet link into your head before all other stylesheets to load bootstrap css.


   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Javascript

Many of the bootstrap components require the use of javascript function and it requires jquery and popoverjs. place the following code just before the end of body tag.


   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Now you index.html might looks similar to this


   <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

3. Downloading bootstrap files (Local css)

In this method, You’ll need to download bootstrap files from Bootstrap official website and you’ll need to place it into your project.

Here as shown in the below image, I’ve created styles folder and I’ve pasted bootstrap 4 files in it.

Install Bootstap in Angular using local css — Install Bootstap4 in Angular using local css

We’ve installed the bootstrap using different ways described as above, now it’s time to import the css.

Importing Bootstrap CSS in Angular Project

Now we’ll see how to import bootstrap css for the all ways the described above

1.Import css for bootstrap installed via npm

There are two ways to import css that’s installed via npm.

Importing in angular.json
Importing in global style.css or style.scss

1.Importing in angular.json


{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-bootstrap4-sample": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-bootstrap4-sample",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "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.bundle.min.js"
            ]
          },
          "configurations": {
            ....
         }
       ...
      }
 }

Here you might’ve noticed that we’ve added styles as well as scripts.

bootstrap.bundle.min.js and jquery.min.js is required for the component which uses javascript functions. i.e dropdown or modal dialog.

2.Importing in global `style.css` or `style.scss`

In this method, you’ll need to import bootstrap css in src/style.css as follows:


   @import '~bootstrap/dist/css/bootstrap.min.css';

With this method, you’ll still need to include the scripts in angular.json as above method.

so angular.json will looks as follows:


   {
    ....
    "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]
    ...
   }

2. Import css for bootstrap installed via CDN

You don’t have to do anything, you can start using bootstrap in you component.

3. Import css for bootstrap installed via local css

There are two ways to import css that’s installed via local css.

Importing in angular.json
Importing in global style.css or style.scss

1.Importing in `angular.json`

If you’ve installed bootstrap via local css, you’ll need to import the css and script files in angular.json same as 1st method but the path will change from node_modules to styles folder.


   {
    ....
       "styles": [
          "src/styles/bootstrap-4.0.0-dist/css/bootstrap.min.css",
          "src/styles.css"
        ],
       "scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "src/styles/bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"
       ]
    ...

Here, we’ve installed bootstrap files in src/styles folder. and we’ve imported it in angular.json

You might have noticed that we’ve also added a script for jquery, which we’re taking from node_modules folder. you can change it to use it from local project by downloading jquery files and adding it into the project(same as bootstrap).

2.Importing in global `style.css` or `style.scss`

In this method, you’ll need to import bootstrap css in src/style.css as follows:


   @import './styles/bootstrap-4.0.0-dist/css/bootstrap.min.css';

That’s it. We’ve installed Bootstrap 4.

Now see the output for the following code.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>@import './styles/bootstrap-4.0.0-dist/css/bootstrap.min.css';

Output

I hope you like this article.

Creating Angular project using Angular CLI

Install angular cli

Generate project

Navigate to project directory

Installing Bootstrap 4

1. Install bootstrap using the npm package

2. Using Bootstrap CDN

3. Downloading bootstrap files (Local css)

Importing Bootstrap CSS in Angular Project

1.Import css for bootstrap installed via npm

1.Importing in angular.json

2.Importing in global style.css or style.scss

2. Import css for bootstrap installed via CDN

3. Import css for bootstrap installed via local css

1.Importing in angular.json

2.Importing in global style.css or style.scss

2.Importing in global `style.css` or `style.scss`

1.Importing in `angular.json`

2.Importing in global `style.css` or `style.scss`