Skip to main content
bootstrap-ng

Search the docs

Quickstart

Create a new Angular application with bootstrap-ng and build a small page with a dialog and a toast.

1. Create an application

You need Node.js and npm. Create an application with the Angular CLI and choose Sass for styles: 

npx @angular/cli@latest new my-app --style=scss
cd my-app

2. Install bootstrap-ng and Bootstrap

Bootstrap 6 is published under the next tag until its stable release. Floating UI positions tooltips, popovers and menus. 

npm install bootstrap-ng bootstrap@next @floating-ui/dom

3. Add Bootstrap's styles

Import Bootstrap at the top of src/styles.scss:

@use 'bootstrap/scss/bootstrap';

Do not add Bootstrap's JavaScript. bootstrap-ng implements all of its behavior in Angular.

4. Build a page

Replace src/app/app.ts with a component that imports the parts it uses:

import { Component, inject, signal } from '@angular/core';
import {
  BsButton,
  BsCloseButton,
  BsDialog,
  BsDialogClose,
  BsFormControl,
  BsFormField,
  BsFormLabel,
  BsToaster,
} from 'bootstrap-ng';

@Component({
  selector: 'app-root',
  imports: [
    BsButton,
    BsCloseButton,
    BsDialog,
    BsDialogClose,
    BsFormControl,
    BsFormField,
    BsFormLabel,
  ],
  templateUrl: './app.html',
})
export class App {
  private readonly toaster = inject(BsToaster);
  protected readonly name = signal('');

  protected save(): void {
    this.toaster.show({ title: 'Saved', body: `Hello, ${this.name() || 'friend'}!` });
  }
}

And replace src/app/app.html with its template:

<main class="container py-5">
  <h1>Hello, bootstrap-ng</h1>
  <button type="button" bsButton theme="primary" (click)="dialog.show()">Edit name</button>
</main>

<dialog bsDialog #dialog="bsDialog" aria-labelledby="name-dialog-title">
  <div class="dialog-header">
    <h2 class="dialog-title" id="name-dialog-title">Your name</h2>
    <button bsCloseButton bsDialogClose></button>
  </div>
  <div class="dialog-body">
    <div bsFormField>
      <label bsFormLabel>Name</label>
      <input #input type="text" bsFormControl [value]="name()" (input)="name.set(input.value)" />
    </div>
  </div>
  <div class="dialog-footer">
    <button type="button" bsButton theme="secondary" bsDialogClose>Cancel</button>
    <button type="button" bsButton theme="primary" bsDialogClose (click)="save()">Save</button>
  </div>
</dialog>

The button opens a native <dialog>, which traps focus and closes with Escape. Saving closes it and shows a toast through BsToaster.

5. Run it

ng serve

Open http://localhost:4200 and select Edit name.

Next steps