How to install bootstrap 4 in angular application

Bootstrap is used to design websites more beautiful. It is responsive framework for HTML and CSS.

Bootstrap

Bootstrap is used to design websites more beautiful. It is responsive framework for HTML and CSS. Bootstrap having html css responsive templates to design more attractive website. It is very faster and easier framework to design websites.

How to install bootstrap in angular framework ?

Prerequisite

Angular Cli. To install angular cli click here.

Setup

To Install bootstrap there is two methods available.

Install bootstrap using node package manager (NPM).
Install bootstrap using content delivery network (CDN).

Method 1

Install bootstrap using node package manager (NPM).

The command is used to install bootstrap using npm in angular project is

npm install bootstrap --save

If you want to install the version of bootstrap use this command

npm install bootstrap@4.3.3 --save

In the above command the version is mentioned after the @ sign which indicates to node package manager install bootstrap of version 4.3.3

Method 2

Install bootstrap using content delivery network (CDN)

To download CDN go to main bootstrap site. Click here to go official website.

Apply Bootstrap to Project

Method 1

After installation done using npm. Then after adding the bootstrap min css and js to angular json file

//project_name > angular.json

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

Sometime bootstrap need jquery also so install it using.

npm install jquery --save

After install jquery successfully add jquery js file to angular josn file

//project_name > angular.json

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

Bootstrap setup completed you can use bootstrap to your project.

Method 2

Install bootstrap using content delivery network (CDN). You need CDN link to add this link to angular index.html file.

To download the CDN file click here.

Add this CDN to angular index.html file

// src > index.html

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

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

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

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

Sometime bootstrap need jquery also so add it using jquery CDN, to get jquery cdn go to link.

After taking the CDN add to your index.html file to support jquery to bootstrap.

// src > index.html

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

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

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

<!-- Jquery JS CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Bootstrap JS CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

Bootstrap setup completed you can use bootstrap to your project.

You can use bootstrap using NG Bootstrap. To see how to use NG Bootstrap use this article.

To see bootstrap is successfully installed to your angular project or not.

Add the bellow code to your component html file

// src > app > app.component.html

<div class="container-fluid">
  <div class="jumbotron text-center mt-lg-5">
    <strong> Hi you have successfully installed bootstrap. Thankyou for seen this article. </strong>
  </div>
</div>

Output

Thank you for watching this article.

How to install bootstrap 4 in angular application

Bootstrap is used to design websites more beautiful. It is responsive framework for HTML and CSS.

Bootstrap

How to install bootstrap in angular framework ?

Prerequisite

0 Comments

Hit Like

Here About Author

Bhushan Zade

FILE DRAG AND DROP IN ANGULAR 10

Compress or reduce size of image using Django rest framework

How to compress or crop image using ngx-image-cropper module in Angular app

Angular make confirm dialog box using Ng-Bootstrap model popup package.

Manual Connect MySQL Database Server With Java Spring Boot Application

Add multiple location markers into google map using AGM into angular app

How to install Bootstrap and Jquery in React JS

Add auto search google map places or location search bar into angular app