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.

🐊 Alligator.io recommends

Our recommended Angular courses

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:

"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css"

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!
    </ngb-alert>

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

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

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

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

And here's the result:

A sample app using ng-bootstrap

Components

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#
#native_cta#