Angular6Bootstrap 4

Add Bootstrap 4 to Angular 6

How to make business template with Bootstrap 4 and Angular 9?

Add Bootstrap 4 to Angular 6 - The Rich Post

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:

bootstrap4-angular6

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.

 

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

1 Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.