How to add bootstrap and other js in angular application

In this tutorial we will understand how to add bootsrap css in angular app.

After creating the angular basic app using ng new my-dream-app install the bootstrap using the below command.

1. Install bootsrap using npm cli

> npm install bootstrap –save

Type this command from your project directory eg: (c:\workspace\my-dream-app)

Note: In case you see a Warning as below in the snapshot, it means you need to navigate to your project structure and then execute the bootstrap install command, if you see a warning of package.json no such file warning it simply means you must install bootstrap from this directory where the file is present.

2. Add bootstrap css entry in angular.json

Open angular.json file, locate styles and add bootstrap file path to the styles section. Like this,

3. Verify – bootstrap has been installed successfully or not?

Let’s add a table with few extra bootstrap classes to see bootstrap is working fine or not

In your app.component.html

add the following html table code:

<div class="container">
  <table class="table table-dark table-hover table-striped">
    <thead class="thead-light">
      <tr>
        <th>Name</th>
        <th>Age</th>       
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jack</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>31</td>       
      </tr>
      <tr>
        <td>Robert</td>
        <td>32</td>       
      </tr>
    </tbody>
  </table>
</div>

Now You would see this in your browser: localhost:4200

AND earlier without Bootstrap, it would look like as shown below:

Summary

In this tutorial, we learnt about how to add bootstrap in angular project and how to make use of it by adding a simple bootsrap css classes in html table, Enjoy using bootstrap with angular now, it makes life easier.
Hope you liked it!

---