Angular Bootstrap

This one's for anyone integrating Bootstrap 5 components into Angular projects using ng-bootstrap. It covers the full setup from installation through angular.json configuration, then walks through the major components like modals, dropdowns, accordions, datepickers, and typeaheads. The skill emphasizes standalone component usage, which is good since that's the modern Angular approach. What's genuinely helpful here is seeing the actual import statements and template syntax for each component, especially the newer control flow syntax with @for blocks. It targets ng-bootstrap 17.x specifically, so you're getting patterns that work with current Angular versions rather than outdated module-heavy approaches.

skills.sh installs: 205
GitHub stars: 7
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add oguzhan18/angular-ecosystem-skills --skill angular-bootstrap --agent claude-code

Installs into .claude/skills of the current project.

Files

ng-bootstrap / Angular Bootstrap

Version: ng-bootstrap 17.x (2025) Tags: Bootstrap, UI Components, ng-bootstrap

References: ng-bootstrap • GitHub

API Changes

This section documents recent version-specific API changes.

NEW: Bootstrap 5 support — Full Bootstrap 5 integration
NEW: Standalone components — All components are standalone
NEW: Bootstrap icons support — Icon integration
NEW: Angular 17+ support — Full compatibility with modern Angular

Best Practices

Install ng-bootstrap

npm install @ng-bootstrap/ng-bootstrap @popperjs/core bootstrap

Import styles in angular.json

{
  "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"]
}

Import NgbModule

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule]
})
export class AppModule {}

Use standalone import

import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  standalone: true,
  imports: [NgbCarouselModule],
  // ...
})
export class CarouselComponent {}