Add Bootstrap 4 to Angular 6 or Angular 7 application

Bootstrap 4 is the newest version of Bootstrap, the world’s most popular front-end component library to build responsive, mobile-first projects on the web. Angular 6 is the newest version of Angular. A combination of both will make an application fast, visually appealing and modern. In this post, we’ll see how to add bootstrap 4 to Angular 6 or Angular 7 application with some examples.

Add Bootstrap 4 to Angular 6 or Angular 7 application

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

First, let’s create an Angular 6 app using the following command.

ng new Angular6TestApp

Once the app is created successfully, install bootstrap 4 via:

npm install bootstrap --save

Next, open angular.json file and add bootstrap file path to the styles section. Like,

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

That’s it. Run the app and you should see bootstrap 4 styles applied to the angular app. See below image.

Let’s add some bootstrap 4 stuff to the app to verify things. One of the new features of bootstrap 4 is support for dark tables. Add the following HTML in the app.component.html file to create a dark style table.

<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>Steve Smith</td>
        <td>28</td>
      </tr>
      <tr>
        <td>David Warner</td>
        <td>29</td>        
      </tr>
      <tr>
        <td>Joe Root</td>
        <td>27</td>        
      </tr>
    </tbody>
  </table>
</div>

Save the file and run the application again. You should see a dark style table rendered in the browser.

If you are also planning to use ng-bootstrap then, install ng-bootstrap via:

npm install --save @ng-bootstrap/ng-bootstrap

Once installed, you need to import our main module and add the imported module in the root module. To do that, open app.module.ts file and include the following code.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  imports: [ NgbModule.forRoot(), ... ],  
  // ...
})
export class AppModule {}

Finally, let’s verify ng-bootstrap is working as expected or not. To do that, we’ll simply add an alert to the app.component.html file with the following code.

<p>
  <ngb-alert [dismissible]="false">
    <strong>Warning!</strong> Sample alert.
  </ngb-alert>
</p>

Run the app and you should see an alert displayed in the browser.

That’s it.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then