<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-light">Light Button</button>

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning text-dark">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark tag-pills-sm-mb">Dark</span>

<div class="progress mb-2">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 25%"           aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%"         aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>

<p *ngFor="let alert of alerts">
	<ngb-alert [type]="alert.type" (closed)="close(alert)">{{ alert.message }}</ngb-alert>
</p>

import { Component } from '@angular/core';
import { NgFor } from '@angular/common';
import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';

interface Alert {
	type: string;
	message: string;
}

const ALERTS: Alert[] = [
	{
		type: 'success',
		message: 'This is an success alert',
	},
	{
		type: 'info',
		message: 'This is an info alert',
	},
	{
		type: 'warning',
		message: 'This is a warning alert',
	},
	{
		type: 'danger',
		message: 'This is a danger alert',
	},
	{
		type: 'primary',
		message: 'This is a primary alert',
	},
	{
		type: 'secondary',
		message: 'This is a secondary alert',
	},
	{
		type: 'light',
		message: 'This is a light alert',
	},
	{
		type: 'dark',
		message: 'This is a dark alert',
	},
];

@Component({
	selector: 'ngbd-alert-closeable',
	imports: [NgFor, NgbAlertModule],
	templateUrl: './alert-closeable.html',
})
export class NgbdAlertCloseable {
	alerts: Alert[];


	close(alert: Alert) {
		this.alerts.splice(this.alerts.indexOf(alert), 1);
	}

	reset() {
		this.alerts = Array.from(ALERTS);
	}
}

<button
			type="button"
			class="btn btn-outline-secondary"
			popoverTitle="Pop title"
			[autoClose]="'inside'"
			ngbPopover="Click inside or press Escape to close"
		>
			Click to toggle
		</button>
<a tabindex="0" class="example-popover btn btn-secondary" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
<button
	type="button"
	class="btn btn-outline-secondary"
	ngbPopover="You see, I show up on hover!"
	triggers="mouseenter:mouseleave"
	popoverTitle="Pop title"
>
	Hover over me!
</button>

import { Component } from '@angular/core';
import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-popover-triggers',
	imports: [NgbPopoverModule],
	templateUrl: './popover-triggers.html',
})
export class NgbdPopoverTriggers {}

<button type="button" class="example-popover btn btn-primary" placement="top" ngbTooltip="Popover title">Hover Me</button>

<div ngbDropdown class="d-inline-block" placement="bottom">
<button class="dropbtn btn-primary" id="dropdownBasic1" ngbDropdownToggle >Dropdown Button</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
  <button class="dropdown-item">Action</button>
  <button class="dropdown-item">Another Action</button>
  <button class="dropdown-item">Something Else Here</button>
</div>
</div>

<ul ngbNav #nav="ngbNav" [activeId]="2" class="nav-tabs justify-content-center">
	<li [ngbNavItem]="1">
		<button ngbNavLink>Simple</button>
		<ng-template ngbNavContent>
			<p>
				Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
				master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
				keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
				salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
			</p>
		</ng-template>
	</li>
	<li [ngbNavItem]="2">
		<button ngbNavLink><b>Fancy</b> title</button>
		<ng-template ngbNavContent>
			<p>
				Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
				farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
				ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar
				helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson
				8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester
				stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
			</p>
		</ng-template>
	</li>
	<li ngbDropdown class="nav-item" role="presentation">
		<button type="button" class="nav-link" ngbDropdownToggle>Dropdown</button>
		<div ngbDropdownMenu>
			<button ngbDropdownItem>Action</button>
			<button ngbDropdownItem>Another action</button>
			<button ngbDropdownItem>Something else here</button>
			<div class="dropdown-divider"></div>
			<button ngbDropdownItem>Separated link</button>
		</div>
	</li>
	<li ngbNavItem [disabled]="true" class="ms-auto">
		<button ngbNavLink>Disabled</button>
		<ng-template ngbNavContent>
			<p>
				Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
				Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio.
				Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna,
				egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec
				tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et
				magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget
				neque. Phasellus nec tortor vel tellus pulvinar feugiat.
			</p>
		</ng-template>
	</li>
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

import { Component } from '@angular/core';
import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-nav-custom-style',
	imports: [NgbNavModule, NgbDropdownModule],
	templateUrl: './nav-custom-style.html',
})
export class NgbdNavCustomStyle {}

<div ngbAccordion [closeOthers]="true">
	<div ngbAccordionItem *ngFor="let panel of panels" [collapsed]="panel !== 'First'">
		<h2 ngbAccordionHeader>
			<button ngbAccordionButton>{{ panel }}</button>
		</h2>
		<div ngbAccordionCollapse>
			<div ngbAccordionBody>
				<ng-template>
					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
					officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
					moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
					keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
					butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
					haven't heard of them accusamus labore sustainable VHS.
				</ng-template>
			</div>
		</div>
	</div>
</div>

import { Component } from '@angular/core';
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';

@Component({
	selector: 'ngbd-accordion-static',
	imports: [CommonModule, NgbAccordionModule],
	templateUrl: './accordion-static.html',
})
export class NgbdAccordionStatic {
	panels = ['First', 'Second', 'Third'];
}