<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">Dark</span>

<ngb-progressbar [value]="0" textType="white" [showValue]="true"/>
<ngb-progressbar type="primary" [value]="25" textType="white" [showValue]="true"/>
<ngb-progressbar type="secondary" [value]="50" textType="white" [showValue]="true"/>
<ngb-progressbar type="success" [value]="75" textType="white" [showValue]="true"/>
<ngb-progressbar type="info" [value]="100" textType="white" [showValue]="true"/>

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

@Component({
  selector: 'app-progress',
  imports: [NgbProgressbarModule],
  templateUrl: './progress.html',
  styleUrl: './progress.scss'
})

export class Progress {

}                  
  

<ngb-alert [dismissible]="false" [type]="'primary'">This is a primary alert—check it out!</ngb-alert>
<ngb-alert [dismissible]="false" [type]="'secondary'">This is a secondary alert—check it out!</ngb-alert>
<ngb-alert [dismissible]="false" [type]="'success'">This is a success alert—check it out!</ngb-alert>
<ngb-alert [dismissible]="info" [type]="'primary'">This is a primary alert—check it out!</ngb-alert>
<ngb-alert [dismissible]="false" [type]="'warning'">This is a warning alert—check it out!</ngb-alert>
<ngb-alert [dismissible]="false" [type]="'danger'">This is a danger alert—check it out!</ngb-alert>
<ngb-alert [dismissible]="false" [type]="'light'">This is a light alert—check it out!</ngb-alert>
<ngb-alert [dismissible]="false" [type]="'dark'">This is a dark alert—check it out!</ngb-alert>

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

@Component({
  selector: 'app-alert',
  imports: [NgbAlertModule],
  templateUrl: './alert.html',
  styleUrl: './alert.scss'
})

export class Alert {

}

<button class="btn btn-primary example-popover mb-0 me-0" type="button" placement="start"
ngbPopover="And here's some amazing content. It's very engaging. Right?" popoverTitle="Popover Title">Hurry Up!  </button>

<button class="example-popover btn btn-success mb-0 me-0" type="button" 
triggers="mouseenter:mouseleave" placement="bottom" 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."
popoverTitle="Hover Popover">Hover Tooltip</button>

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

@Component({
  selector: 'app-popover',
  imports: [NgbPopoverModule],
  templateUrl: './popover.html',
  styleUrl: './popover.scss'
})

export class Popover {

}
                  

<button class="example-popover btn btn-primary mb-0 me-0" type="button" placement="top" [ngbTooltip]="'Surprise!!! Thank you for hovering...'">Hover Me</button>

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

@Component({
  selector: 'app-tooltip',
  imports: [NgbTooltipModule],
  templateUrl: './tooltip.html',
  styleUrl: './tooltip.scss'
})

export class Tooltip {

}

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

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

@Component({
  selector: 'app-dropdown',
  imports: [NgbDropdownModule],
  templateUrl: './dropdown.html',
  styleUrl: './dropdown.scss'
})

export class BasicDropdown {

}                  

 <div ngbAccordion [closeOthers]="true">
   <div ngbAccordionItem [collapsed]="false">
     <h2 ngbAccordionHeader>
       <button ngbAccordionButton>Collapsible Group Item #
       <span class="digits">1 </span> </button>
     </h2>
     <div ngbAccordionCollapse>
       <div ngbAccordionBody>
         <ng-template>
          <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
         </ng-template>
       </div>
     </div>
   </div>
   <div ngbAccordionItem>
     <h2 ngbAccordionHeader>
       <button ngbAccordionButton>
        Collapsible Group Item #
         <span class="digits">2 </span>
       </button>
     </h2>
     <div ngbAccordionCollapse>
       <div ngbAccordionBody>
         <ng-template>
          <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
         </ng-template>
       </div>
     </div>
   </div>
   <div ngbAccordionItem>
     <h2 ngbAccordionHeader>
       <button ngbAccordionButton>Collapsible Group Item #
       <span class="digits">3 </span> </button>
     </h2>
     <div ngbAccordionCollapse>
       <div ngbAccordionBody>
         <ng-template>
          <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
         </ng-template>
       </div>
     </div>
   </div>
 </div>

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

@Component({
  selector: 'app-accordion',
  imports: [NgbAccordionModule],
  templateUrl: './accordion.html',
  styleUrl: './accordion.scss'
})

export class Accordion {

}

<ul ngbNav #nav="ngbNav" [activeId]="1" class="nav-tabs justify-content-center">
  <li [ngbNavItem]="1">
    <button ngbNavLink>Home</button>
    <ng-template ngbNavContent>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </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]="3">
    <button ngbNavLink>Profile</button>
    <ng-template ngbNavContent>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

      </p>
    </ng-template>
  </li>

  <li [ngbNavItem]="4">
    <button ngbNavLink>Contact</button>
    <ng-template ngbNavContent>
      <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

      </p>
    </ng-template>
  </li>
</ul>

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

@Component({
  selector: 'app-tab',
  imports: [NgbNavModule, Card],
  templateUrl: './tab.html',
  styleUrl: './tab.scss'
})

export class Tab {

  public activeTab = 1;
  
}