Monday, March 16, 2020

How to Add Bootstrap to Angular Application

In this article we’ll see how to add Bootstrap to your Angular application so that you can style your templates. Bootstrap is one of the most popular HTML and CSS framework for building responsive UI and used widely with JS frameworks like Angular to create a better user experience.

Including Bootstrap in Angular application

In order to add Bootstrap to Angular application of course the first step is to have an Angular application.

Installing Bootstrap using NPM

You can install Bootstrap using NPM, first go to the root folder of your Angular application and run the following command.

npm install --save bootstrap jquery

Above command installs the latest version of Bootstrap as well as of jquery. If you want to install specific version of Bootstrap then you can specify the version with the command as given below-

npm install bootstrap@version_num
Verifying the installation

Installation of the Bootstrap and JQuery module is done inside the node_modules directory of your Angular application. You can verify that the folder with the same name i.e. bootstrap and jquery exists in the node_modules directory.

Adding bootstrap to Angular app

Now you need to make Angular aware of the location of the bootstrap and jquery. For that you can add it to the angular.json file.

Open angular.json and add the path to the bootstrap and jquery in the “styles” and “scripts” arrays respectively.

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

Now if you build your application using ng serve command and access URL http://localhost:4200/ you can check the elements in the Developer tools to see that Bootstrap is included.

Adding Bootstrap to Angular

Another way to add Bootstrap and js files is to add the paths to the src/index.html file using <link> and <script> tags.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloWorldApp</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="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    
  <app-root></app-root>
   <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="..node_modules/bootstrap/dist/js/bootstrap.min.js"></script>  
</body>
</html>

Doing styling with Bootstrap

Now we can do styling using Bootstrap, here is a simple example with changes in app.component.html file.

<div class="container">
    <div class="row">
    <div class="col-xs-12">
    <h1>{{title}}</h1>
    <p>I have a hello world component so that tag is used.
    You can check Bootstrap integration only with app root tag also.</p>
    <app-hello-world ></app-hello-world>
    </div>
</div>

Now if you access http://localhost:4200/ your template would be rendered as shown in the following image.

Using Bootstrap with Angular

That's all for this topic How to Add Bootstrap to Angular Application. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page


Related Topics

  1. How to Install Node.js and NPM in Windows
  2. How to Setup Angular
  3. Angular Project Structure With File Description
  4. Angular Application Bootstrap Process
  5. Creating New Component in Angular

You may also like-

  1. Installing Anaconda Distribution On Windows
  2. Marker Interface in Java
  3. ArrayList in Java With Examples
  4. PermGen Space Removal in Java 8
  5. Spring Boot Hello World Web Application Example
  6. Spring Boot spring-boot-starter-parent
  7. Java Lambda Expressions Interview Questions And Answers
  8. Compressing File in snappy Format in Hadoop - Java Program