Introduction

Add bootstrap-ng to an Angular application and use your first component.

Requirements

• Angular 22 or later
• Bootstrap 6 CSS

bootstrap-ng does not use Bootstrap's JavaScript. Do not add bootstrap.bundle.js to your application. It would handle the same elements twice.

Install

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

Bootstrap 6 is published under the next tag until its stable release, so a plain npm install bootstrap would install Bootstrap 5. Floating UI positions tooltips, popovers and menus, as it does in Bootstrap.

Add Bootstrap's CSS

Add the compiled CSS to the styles array in angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
]

Or, to customize Bootstrap with Sass, import its source in your global stylesheet:

@use 'bootstrap/scss/bootstrap';

Or load it from the jsDelivr CDN in the <head> of src/index.html, as this site does. Keep the version in step with the bootstrap package:

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe"
  crossorigin="anonymous" />

Use a component

Every component and directive is standalone. Import the ones you need into your component's imports:

import { Component } from '@angular/core';
import { BsAlert, BsButton } from 'bootstrap-ng';

@Component({
  selector: 'app-root',
  imports: [BsAlert, BsButton],
  template: `
    <div bsAlert theme="success" dismissible>
      <p>bootstrap-ng is ready.</p>
    </div>
    <button type="button" bsButton theme="primary">Save</button>
  `,
})
export class App {}

Follow the Quickstart to build a small page step by step, or read the conventions to learn how the API is designed, then browse the components in the sidebar.