<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" placement="left"
popoverTitle="Popover title" ngbPopover="And here's some amazing content. It's very engaging. Right?">Hurry Up!
</button>
<button class="example-popover btn btn-success mb-0 me-0" type="button" placement="bottom" popoverTitle="Hover Popover"
data-offset="-20px -20px"
triggers="mouseenter:mouseleave"
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.">Hover
tooltip</button>

<!--html files-->
<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>
    <h5 class="mb-1 py-4 pb-0">Inline Tooltip Content</h5>
    <p class="mb-0">Here, is some content about tooltips that you can set the
      <a class="txt-primary fw-bold" placement="top" ngbTooltip="tooltip"> tooltip</a> inside the content with help of
      tooltip and also you can add
      <button class="btn btn-success text-white border-0 px-3 py-1 me-0 mb-0" type="button" placement="top"
        ngbTooltip="button">button </button> .Tooltips helps you to add more and more content. A tooltip is often used
      to specify extra information about something when the user moves the mouse pointer over an element
    </p>

        <div class="common-flex">
            @for (allData of basicDropdownData; track allData) {
            <div class="btn-group" ngbDropdown>
                <button class="btn btn-{{allData.colorClass}} dropdown-toggle" type="button"
                    ngbDropdownToggle>{{allData.title}}</button>
                <ul class="dropdown-menu dropdown-block" ngbDropdownMenu>
                    @for (items of allData.dropdownItem; track items) {
                    <li>
                        <a class="dropdown-item" href="javascript:void(0)" ngbDropdownItem>{{items.item}}</a>
                    </li>
                    }
                </ul>
            </div>
            }
        </div>

import { Component } from '@angular/core';
import * as Data from '../../../../shared/data/data/ui-kits/dropdown';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';

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

export class Basic {

  public basicDropdownData = Data.basicDropdownData;

}

export const basicDropdownData = [
    {
        colorClass : 'primary',
        title : 'Dashboard',
        dropdownItem : [
            { item : 'Project' },
            { item : 'Ecommerce' },
            { item : 'Crypto' },
        ]
    },
    {
        colorClass : 'secondary',
        title : 'Ecommerce',
        dropdownItem : [
            { item : 'Product' },
            { item : 'Product details' },
            { item : 'Cart' },
        ]
    },
    {
        colorClass : 'warning',
        title : 'Ui kits',
        dropdownItem : [
            { item : 'Typography' },
            { item : 'Avatars' },
            { item : 'Grid' },
        ]
    },
    {
        colorClass : 'danger',
        title : 'Error page',
        dropdownItem : [
            { item : 'Error 400' },
            { item : 'Error 403' },
            { item : 'Error 500' },
        ]
    },
]

    <ul class="simple-wrapper nav nav-tabs" ngbNav #nav="ngbNav" [(activeId)]="active">
            <li class="nav-item" [ngbNavItem]="1">
                <a class="nav-link txt-primary" ngbNavLink>Home</a>
                <ng-template ngbNavContent>
                    <p class="pt-3">This is some placeholder content the <b>Home tab's </b>associated content. Clicking
                        another tab will toggle the visibility of this one for the next. The tab JavaScript swaps
                        classes to control the content visibility and styling. You can use it with tabs, pills, and any
                        other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that
                        allows developers to create tabbed navigation effortlessly.</p>
                </ng-template>
            </li>
            <li class="nav-item" [ngbNavItem]="2">
                <a class="nav-link active txt-primary" ngbNavLink class="nav-link txt-primary">Profile</a>
                <ng-template ngbNavContent>
                    <div class="pt-3 mb-0">
                        <div class="flex-space flex-wrap align-items-center"><img class="tab-img"
                                src="assets/images/avtar/3.jpg" alt="profile">
                            <ul class="d-flex flex-column gap-1">
                                <li> <strong>Visit Us:</strong> 2600 Hollywood Blvd,Florida, United States-33020</li>
                                <li> <strong>Mail Us:</strong> contact&#64;us&#64;gmail.com</li>
                                <li><strong>Contact Number: </strong> (954) 357-7760</li>
                            </ul>
                        </div>
                    </div>
                </ng-template>
            </li>
            <li class="nav-item" [ngbNavItem]="3">
                <a class="nav-link txt-primary" ngbNavLink class="nav-link txt-primary">Contact</a>
                <ng-template ngbNavContent>
                    <ul class="pt-3 d-flex flex-column gap-1">
                        <li>Us Technology offers web & mobile development solutions for all industry verticals.Include a
                            short form using fields that'll help your business understand who's contacting them.</li>
                        <li> <strong>Visit Us: </strong> 2600 Hollywood Blvd,Florida, United States- 33020</li>
                        <li> <strong>Mail Us:</strong> contact&#64;us&#64;gmail.com</li>
                        <li> <strong>Contact Number: </strong> (954) 357-7760</li>
                    </ul>
                </ng-template>
            </li>
        </ul>
        <div [ngbNavOutlet]="nav"></div>

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

@Component({
  selector: 'app-simple-tabs',
  imports: [NgbNavModule],
  templateUrl: './simple-tabs.html',
  styleUrls: ['./simple-tabs.scss']
})

export class SimpleTabs {

  public active = 2;

}

    <div class="accordion dark-accordion" id="simpleaccordion" ngbAccordion [closeOthers]="true">
      @for (allData of simpleAccordionData; track allData) {
      <div class="accordion-item" ngbAccordionItem [collapsed]="allData.panel !== 'First'">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed bg-light-primary txt-primary active" type="button"
            ngbAccordionButton>{{allData.title}}
            <app-feather-icon [class]="'svg-color'" [icon]="'chevron-down'"></app-feather-icon>
          </button>
        </h2>
        <div class="accordion-collapse collapse show" ngbAccordionCollapse>
          <div class="accordion-body" ngbAccordionBody>
            <p [innerHTML]="allData.desc"></p>
          </div>
        </div>
      </div>
      }
    </div>

import { Component } from '@angular/core';
import * as Data from '../../../../shared/data/data/ui-kits/accordion';
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
import { FeatherIcon } from '../../../../shared/component/feather-icon/feather-icon';

@Component({
  selector: 'app-simple-accordian',
  imports:[NgbAccordionModule,FeatherIcon],
  templateUrl: './simple-accordian.html',
  styleUrls: ['./simple-accordian.scss']
})

export class SimpleAccordian {

  public simpleAccordionData = Data.simpleAccordionData;

}