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:

  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:

Bootstrap Carousel in Angular
How to install TinyMCE in Angular
Components in angular
Services in angular
CRUD Operations in Angular
Routing in Angular


5 1 vote
Article Rating
Subscribe
Notify of
guest
8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
treetechnox
treetechnox
1 year ago

good article.

Chitwan
Chitwan
1 year ago

how to install font-awesome and will the bootstrap files of previous versions work on this or not?

Brawl Stars Gems
Brawl Stars Gems
1 year ago

Pretty! This was an extremely wonderful article. Thank you for providing this information.

Lorrie Klingaman
Lorrie Klingaman
1 year ago

Very nice post. I certainly love this website. Continue the good work!

3M 9502v
3M 9502v
1 year ago

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

Kandi
Kandi
1 year ago

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!

Sourav Dash
Sourav Dash
5 months ago

I have been searching and trying all sorts of things for hours but nothing was working. This article save my day. Thanks a lot.