Add Bootstrap 4 to Angular 6

Hello to all, welcome to therichpost.com.  In this post, I will tell you, Add Bootstrap 4 to Angular 6.

Here is simple example to Add Bootstrap 4 to Angular 6 application.

Here is the working picture:

Here are the following steps to add Bootstrap 4 Angular 6 application:

1. First you need to run below command into your terminal to include bootstrap 4 into your angular 6 app:

npm install --save bootstrap

2. After that, you need to add below code into your angular.json file:

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

 3. After that, you need to below code into your app.component.html file:

<div class="container">
  <table class="table table-striped">
    <thead class="thead-light">
      <tr>
        <th>Name</th>
        <th>Department</th>
        <th>Experience</th>        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajay</td>
        <td>Angular</td>
    <td>4 yrs</td>
      </tr>
    </tbody>
  </table>
</div>

 4. Finally, run your application again and you are done.

If you have any query related to this post then you can ask the questions or comment below.