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.

Please refer Angular First App - Hello world Example to see the steps for creating 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.bundle.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.

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.bundle.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.

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

You may also like-

Tech Tutorials

Monday, March 11, 2024