How to Add Bootstrap to an Angular project

Bootstrap Introduction
Bootstrap is the most popular CSS, HTML and Javascript Framework for developing responsive and mobile-first websites. Bootstrap is easy to learn. Bootstrap 4 is the newest version of Bootstrap.
If you are new to the Bootstrap then you can learn Bootstrap from its official website. In this article, we are going to learn How to Add Bootstrap to an Angular project.

Setting up an Angular project with Angular-CLI
First of all, we have to set up the project in Angular in which you are going to use bootstrap. If you are new to Angular then you can learn how to install Angular and create your first project in the Angular from this link. I believe this article will help you a lot regarding the same. First, check whether Angular-Cli is present on your system or not. You can check it by running a command

ng -version

If it is not available then you have to install the Angular-CLI on your system. You can refer to this article of mine regarding the installing of Angular-CLI.
I am assuming Angular-Cli is present on your system.

Create new project Angular
Now, create a new project in angular by running below command in the console.

ng new ProjectName

The above command will create a new project with your provided ProjecrName with the use of Angular-CLI. Switch the directory to your ProjectName directory by using

cd ProjectName

now, start to build the project and start the server by:

ng serve

Hit this URL: http://localhost:4200/ in any browser and we can see the output as of below image:-

Installing Bootstrap
Till here, the Angular project is ready and running we can move ahead of adding Bootstrap to the project. There are different ways to add Bootstrap in the project library. You can opt any of this.

Adding Bootstrap From CDN

To include Bootstrap in your Angular project, we required two files:
1) Bootstrap CCS file
2) Bootstrap javaScript file
To run javascript in the Angular project we need jQuery file too in the project.
All these files can be directly included from a CDN( Content Delivery Network) to your Angular project. You can find the CDN links of the BootStrap at http://getbootstrap.com/getting-started/  and jquery link can be found at https://code.jquery.com/.

So next step will be to add all the files links in the index.html. After adding all the CDN to index.html. index.html file will look like the following

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>XadminApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

 

Now. Bootstrap is included in our project template. Our next step will be changed on src/app/app.component.html file. Insert the below Html template code to app.component.html file

<div class="container">
  <div class="jumbotron">
    <h1>Welcome</h1>
    <h2>Xadmin App Using Bootstrap</h2>
  </div>
  <div class="panel panel-primary">
    <div class="panel-heading">Status</div>
    <div class="panel-body">
      <button type="button" class="btn btn-primary">Bootstrap</button>
    </div>
  </div>
</div>

 


After running ng serve and invoking http://localhost:4200/ the output in the browser looks like

In the above image, we can see Bootstrap class is added into the Button of the page.

Adding Bootstrap Via NPM
Now Let’s try another way to add Bootstrap to your Angular project by using NPM.
Run the following below command

npm install bootstrap –save

Above command will add the latest Bootstrap version in the project. if you want to add another version of the Bootstrap by running

npm install [email protected]_version -save
npm install [email protected] -save

Above command will add Bootstrap version 3.3.7 in the project. After running this command bootstrap will be added to the node-module folder.

We can see the following files in the node modules folder

  • node_modules/jquery/dist/jquery.min.js
  • node_modules/bootstrap/dist/css/bootstrap.min.css
  • node_modules/bootstrap/dist/js/bootstrap.min.js

You can see in the below image that inside node_modules folder bootstrap folder is added.

Now next step is to add the path of the above files to the styles and scripts array in the angular-cli.json file

Next step is to serve the project in the server by ng serve. You can see the output as in the image below:

That’s all from my side on How to Add Bootstrap to an Angular project. In this post, we have learned the different ways to add Bootstrap in the Angular project. Please, feel free to drop a comment in the below comment box. If you find doubt regarding the topic or you want to share more information about the topic. Happy Learning!