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

Introduction:

Bootstrap 4 is the latest version of Bootstrap. 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:

  1. Node.js installed.
  2. 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

bootstrap 4 in angular

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

installing jQuery

Step2: Install Bootstrap npm package

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

npm install bootstrap@4.3.1 --save
installing bootstrap 4

Step 3: Install Popper JS npm package

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

npm install popper.js --save
installing popper js

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"
 ]
adding styles and scripts

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

bootstrap 4 in angular

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.

See Also:

How to install TinyMCE in Angular
Components in angular
Services in angular
CRUD Operations in Angular


8 Comments

  1. Enjoyed reading the article above, really explains
    everything in detail, the guide is very interesting and effective.

    Thank you and good luck in the upcoming articles.
    Best regards,
    Lunding Cannon

  2. I don’t even know how I ended up here, but I thought
    this post was great. I do not know who you are but certainly
    you’re going to a famous blogger if you are not already 😉 Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *