Conventions

The rules that every bootstrap-ng component follows.

Bootstrap markup, not wrappers

Most components use attribute selectors on the element that Bootstrap styles. The rendered DOM is the same as in Bootstrap's own documentation, so selectors such as .accordion > .accordion-item keep working.

<div bsAlert theme="info">…</div>
<button type="button" bsButton="outline" theme="primary">…</button>
<details bsAccordionItem>…</details>

Themes and variants

Bootstrap 6 replaces color-named classes such as .btn-primary with a variant class and a .theme-* class. bootstrap-ng exposes these as separate variant and theme inputs. The themes are primary, accent, success, danger, warning, info, inverse and secondary.

Signals and two-way binding

Inputs use input() and outputs use output(). State that the user can change, such as whether a collapse is open, is a model(), so you can bind it both ways:

<div bsCollapse [(open)]="filtersOpen">…</div>
<dialog bsDialog [(open)]="editing">…</dialog>

Template references

Components with behavior have an exportAs name. Use a template reference to call their methods:

<button type="button" bsButton (click)="confirm.show()">Delete</button>
<dialog bsDialog #confirm="bsDialog">…</dialog>

Imports

Import single components so that unused ones are removed from your bundle. For quick prototypes, BOOTSTRAP_NG contains everything:

import { BOOTSTRAP_NG } from 'bootstrap-ng';

@Component({
  imports: [BOOTSTRAP_NG],
  …
})

Accessibility

Components set the ARIA roles and states that Bootstrap documents, such as aria-expanded on collapse toggles and role="progressbar" on progress bars. You still give labels: for example, aria-label on icon buttons and progress bars. See Accessibility for keyboard support, focus management and live announcements.