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.

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.

the alert with ng-bootstrap is not working for me. In the app.module.ts I have this:
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { NgbModule } from ‘@ng-bootstrap/ng-bootstrap’;
import { AppComponent } from ‘./app.component’;