Angular and Bootstrap 4 are arguably the best frameworks out there, though will different purposes. Angular was developed by Google as a JavaScript framework while Bootstrap was developed by twitter as a CSS framework. The major huddle to using both is that Bootstrap uses jQuery. While you can use both jQuery and Angular in the same Application, it’s redundant. This is because jQuery has the lots of functionality overlapping with angular and you would end up with a bloated application.

Why use Bootstrap?

How to use Angular 4 with Bootstrap 4

Bootstrap 4 is the most complete CSS framework out there. It has 10s of component and utilities for you to use to make your site visually appealing. If you are looking for a great example that relies on Bootstrap, look no further than twitter.

On top of the components and utilities, Bootstrap has also a theming capability. Themes give you the ability to change the look of your site without doing much coding. Bootstrap will save you hours or even days of creating CSS files for your website by giving you 90 - 95% of all the CSS code you need.

Are there alternatives to Bootstrap 4?

Of course, especially when it comes to Angular. One good alternative is Google own Material Design ui-framework. Material Design is a design language developed by Google in 2014. If you are looking for an example of material design in action look at almost all Google website like Google Drive. Its high responsive and looks great on smartphones.

The advantage of this framework is that it easy to integrate with Angular but with a somewhat steep learning curve.

How to use Bootstrap and Angular

First, I am making the assumptions that you know how to use Bootstrap. That said, if you want some nice Bootstrap tutorials check no further than the official Bootstrap documentation.

To use Bootstrap with Angular, we are going to ditch jQuery – it has not place in our application. If you are just interested in using bootstraps classes – buttons, grids, cards – then that’s it for you. You don’t have to add anything on top. But like I said before, Bootstrap is one of the most complete framework and you might want to be able to use everything it has to offer – Modal, Popover, Carrousel etc.

We are going to replace jQuery with an Angular module known as ng-bootstrap. This offers an alternative to all jQuery functionality in bootstrap with Angular directives. The goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code.

Installation and First Time Setup

Install ng-bootstrap using npm

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

or install using yarn

yarn add @ng-bootstrap/ng-bootstrap

Once installed you need to import our main module.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

The only remaining part is to list the imported module in your root module and any additional application modules that make use of the components in this library. The exact method will be slightly different for the root (top-level) module for which you should end up with the code like (notice NgbModule.forRoot()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})

export class AppModule {
}

Final Throughts

Now that you have successfully integrated ng-bootstrap with your application. To learn about how to use all the bootstrap components in Angular, follow the guide here. It has all components with examples on different scenarios and I could not have added it into this post without making it too long or too boring.