Using Bootstrap in Your Angular Apps with ng-bootstrap

ng-bootstrap is a set of components and directives that wrap the latest version of Bootstrap (v4.0.0 alpha 6 at the time of this writing). This makes it easy to use Bootstrap in your Angular apps.

Angular 4+ is required to use ng-bootstrap.

ng-bootstrap depends on Bootstrap’s CSS being available, but you don’t need the Bootstrap JS or jQuery dependencies.

↓ Here's a great Angular book we recommend. Plus, this affiliate banner helps support the site 🙏

Let’s install everything we need into our project and even add Font Awesome to the mix:

$ npm install --save @ng-bootstrap/ng-bootstrap bootstrap@4.0.0-alpha.6 font-awesome

Or if you prefer using Yarn:

$ yarn add @ng-bootstrap/ng-bootstrap bootstrap@4.0.0-alpha.6 font-awesome

Assuming that your Angular app is an Angular CLI project, just add the following in the styles array of the .angular-cli.json file:


This will take care of adding the CSS dependencies for Bootstrap and Font Awesome. Note that you may need to restart your dev server at this point.

A Demo

Here’s an example that shows off some of the custom components and directives available with ng-bootstrap:

<div class="jumbotron">
  <div class="container">
    <ngb-alert type="success" [dismissible]="false">
      Bootstrap is working!

      <i class="fa fa-bath" aria-hidden="true"></i>
      And so is Font Awesome!

<div class="container">
    A progress bar:
    <ngb-progressbar showValue="true" type="success" [value]="65">

<div class="container">
    <ngb-tab title="Bacon">
        <ng-template ngbTabContent>
          <p class="mt-4">Content for tab 1.
            <button type="button"
                    class="btn btn-secondary"
                    ngbPopover="A popover in tab 1"
                    popoverTitle="Bacon is good">
              Click me
      <ngb-tab title="Lettuce">
        <ng-template ngbTabContent>
          <p>Content for tab 2</p>
      <ngb-tab title="Tomatoes">
        <ng-template ngbTabContent>
          <p>Content for tab 3</p>

Notice the use of the ngb-alert, ngb-progressbar and ngb-tabset components.

And here's the result:

A sample app using ng-bootstrap


Refer to the official ng-bootstrap documentation for the syntax on the available components.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#