<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">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>

<div class="alert alert-primary" role="alert">The <a class="alert-link text-white" href="#">"alert-primary"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-secondary" role="alert">The <a class="alert-link text-white" href="#">"alert-secondary"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-success" role="alert">The <a class="alert-link text-white" href="#">"alert-success"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-info" role="alert">The <a class="alert-link text-white" href="#">"alert-info"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-warning" role="alert">The <a class="alert-link text-white" href="#">"alert-warning"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-danger" role="alert">The <a class="alert-link text-white" href="#">"alert-danger"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-light" role="alert">The <a class="alert-link text-dark" href="#">"alert-light"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-dark" role="alert">The <a class="alert-link text-white" href="#">"alert-dark"</a> class can be used to create an alert like this one.</div>

<button class="btn btn-primary example-popover mb-0 me-0" type="button" popoverTitle="Basic title" ngbPopover="If the package restore doesn't help, you can look at the Output window in the Visual Studio." placement="left">Hurry Up!
</button>
<button class="example-popover btn btn-success mb-0 me-0" type="button" data-container="body" popoverTitle="Hover Popover" data-offset="-20px -20px" ngbPopover=" Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building." triggers="mouseenter:mouseleave" placement="bottom">Hover tooltip
</button>
<a class="btn btn-lg btn-secondary" tabindex="0" role="button" popoverTitle="Dismissible popover" ngbPopover="You are able to even develop and suggest improvements to the Bootstrap 4 before its final version is delivered." placement="end"> Dismissible popover</a>

<button class="example-popover btn btn-primary mb-0 me-0" type="button" data-container="body" placement="top" ngbTooltip="Surprise!!! Thank you for hovering...">It's magic please hover me... </button>

  <div class="col">
		<div ngbDropdown class="d-inline-block">
			<button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
				Toggle dropdown
			</button>
			<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
				<button ngbDropdownItem>Action - 1</button>
				<button ngbDropdownItem>Another Action</button>
				<button ngbDropdownItem>Something else is here</button>
			</div>
		</div>
	</div>

<div ngbAccordion [closeOthers]="true">
	@for (item of items; track item) {
		<div ngbAccordionItem [collapsed]="item !== 'First'">
			<h2 ngbAccordionHeader>
				<button ngbAccordionButton>{{ item }}</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';

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