How to install jQuery, Popper JS and Bootstrap 4 in angular 8

Introduction:

Bootstrap is a free front-end framework for quick and simple web development. Bootstrap helps to create responsive designs in less time. Bootstrap contains many HTML and CSS-based templates or components like typography, buttons, forms, tables, image carousels, navigation, modals, pagination, spinners, alerts, icons, dropdowns, cards, and many more.

Prerequisites:

Node.js installed.
Angular CLI installed.

If you are new to learning angular, check my tutorial on how to set up a development environment for angular projects. You will also learn how to create a hello world application in angular 8. Click the following link.

Getting started: Creating a hello world application in angular 8

Bootstrap 4 requires jQuery and popper.js for components like popovers, tooltips, modals, etc. If you only want to use the CSS part from Bootstrap, then you don’t need to install them.

We can install bootstrap through two methods:

Method 1: MaxCDN

If you don’t want to install and host bootstrap, you can add it from CDN(Content Delivery Network).

Step 1: Copy-paste following link and script tags into your head tag in the index.html file

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Step 2: Copy-paste following code in the app.component.html file

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">DevConquer</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="jumbotron">
  <h1 class="text-center">Welcome to angular 8 and bootstrap 4</h1>
</div>

Step 3: Run your project and open the application in a browser

Run your project from a terminal by the ng serve command:

Open your application from a browser by the following URL:

http://localhost:4200

Method 2: By installing the npm packages

Step 1: Install jQuery npm package

Install jquery npm package from a terminal by the following command:

npm install jquery --save

**Note: –save flag will add the dependency in package.json

Step2: Install Bootstrap npm package

Install bootstrap npm package from a terminal by the following command:

npm install bootstrap@4.3.1 --save

Step 3: Install Popper JS npm package

Install popper.js npm package from a terminal by the following command:

npm install popper.js --save

Step 4: Adding styles and scripts into angular.json file

Add the following styles and scripts code in the angular.json file from your project.

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

Step 5: Copy-paste following code in the app.component.html file

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">DevConquer</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="jumbotron">
  <h1 class="text-center">Welcome to angular 8 and bootstrap 4</h1>
</div>

Step 6: Run your project and open the application in a browser

Run your project from a terminal by the ng serve command.

Open your application from a browser by the following URL:

http://localhost:4200

Conclusion:

In this article, I have explained how to install jQuery, Popper JS and Bootstrap 4 in angular step by step. Hopefully, it will be helpful for beginners. If you face any problems, post the problem in the comment block. I will reply to you as soon as possible.