Quickly Add Bootstrap to your Angular 9|10 application in Multiple ways

Published in

Nerd For Tech

4 min readDec 26, 2020

In this article, we are going to discuss multiple ways to add bootstrap in your angular application, basically we will discuss multiple ways to install bootstrap library in your Angular Application. Also we will see how we can have different color themes in our project.

What is Bootstrap?

Bootstrap is a powerful toolkit, a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. It is a free and open source project, hosted on GitHub.

Bootstrap offers you quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Bootstrap 4 is the latest version of Bootstrap (BS) which brings many new and powerful features to the framework most importantly Flex box which is now the default display system for Bootstrap grid layout and grid is one of the most important features of Bootstrap.

Setting Up Angular Project

First we will create new Angular project, easiest way to do is, we will use CLI (Command line interface) & shortcut way to open CLI is press windows key + R key same time it will open Run window type cmd it will open command prompt in windows then navigate to any drive or any folder you want to create your project then enter the following command to create new project:

$ ng new DemoBootstrap

Now change directory to created project

$ cd myproject

and run that project with

$ ng serve

check whether project is running perfectly by opening url http://localhost:4200/.

Install Bootstrap

Now the Angular project is ready and running perfectly to add bootstrap, There are multiple ways to add bootstrap in angular we will see one by one. Here you will find 3 ways to add bootstrap in Angular.

First way: Installing Bootstrap using npm

Step 1: Install Bootstrap using following command

This is a simple technique to install bootstrap, as like other npm libraries we can just install it and will need to define it in angular.json file. The advantage is, if we install npm library it will be available offline.

Following are the commands to install bootstrap by version

For Bootstrap 3:

npm install bootstrap@3.3.7

For Bootstrap 4:

npm install bootstrap

Step 2: Configure angular.js

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

Simply you can import in style.css:

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

Second Way: Add files locally and import

Add files locally in the sense, we can easily download files from the link, copy it in assets folder, and then will

import it in angular.json file like:

"styles": [
  "assets/bootstrap/css/bootstrap.min.css",
  "styles.scss"
],
"scripts": [
    "assets/bootstrap/js/jquery.min.js",
    "assets/bootstrap/js/bootstrap.min.js"
  ],

In style.css file:

@import 'assets/bootstrap/css/bootstrap.min.css';

In index.html file:

under <head></head> tag

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

under <body></body> tag below jQuery library.

<script src="assets/bootstrap/css/js/bootstrap.min.js"></script>

Third Way: Simply add cdn in index.html file

In this way, we will have to just copy the cdn i.e the url’s which are provided on bootstrap’s official site in index.html file To get cdn click here.

Your index.html file will look like:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
  <app-root></app-root>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"
    integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd"
    crossorigin="anonymous"></script>
</body>

</html>

In index.html file you should copy css link in <head> section and js file in <body> section

Note: Before adding Bootstrap’s JavaScript file, any js script in <body> tag, jQuery must be included.

Test whether bootstrap is installed perfectly in your Application

Now we are ready to use bootstrap in any one of our application component, Let’s check it in the main component app.component.html.

<div class="container">
    <div class="jumbotron">
        <h1>Welcome</h1>
        <h2>Angular Bootstrap Demo</h2>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">Panel with panel-primary class</div>
        <div class="panel-body">Panel Content</div>
    </div>
</div>

Cool, you have successfully added bootstrap in your application, you will find the result, if you followed steps properly.

Use Bootswatch Theme

You can change your bootstrap theme using Bootswatch, you just have to go on website https://bootswatch.com/. It will open below website like below picture. On the website you just need to select a theme and click on the “Download” button. It will download a file named bootstrap.min.css. You have to copy it in assets folder like second way above described then make changes in wherever you declared previously.

index.html

<link rel="stylesheet" href="assets/cyborg/bootstrap.min.css">

style.css

@import 'assets/cyborg/bootstrap.min.css';

angular.json

"styles": [
  "assets/cyborg/bootstrap.min.css",
  "styles.scss"
],

Now your theme is changed, you have different look in your browser, theme colors has been changed like this you can try different themes as Bootswatch offers many different themes just you need to download and configure it in your project as described above multiple ways.

Conclusion:

That’s all. In this post we learned multiple ways to add bootstrap in Angular Project. Also seen example after installation of bootstrap then how to change theme with Bootswatch.