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

@for (allData of darkThemeAlertData; track allData) {
<div class="card">
    <div class="card-header">
        <h4>Link color in dark theme</h4>
        <p class="f-m-light mt-1">Use the <code>.alert-link</code> utility class to quickly provide matching colored
            links within any alert.</p>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-xl-6">
                @for (alertData of allData.data1; track alertData) {
                <p class="mb-2 f-w-500">{{alertData.title}}</p>
                <div class="alert alert-{{alertData.alertClass}} dark" role="alert">
                    <p>This is a <a class="alert-link {{alertData.textClass}}"
                            href="javascript:void(0)">{{alertData.title |
                            lowercase}}</a> with an example link. Check it out.</p>
                </div>
                }
            </div>
            <div class="col-xl-6">
                @for (alertData of allData.data2; track alertData) {
                <p class="mb-2 f-w-500">{{alertData.title }}</p>
                <div class="alert alert-{{alertData.alertClass}} dark" role="alert">
                    <p>This is a <a class="alert-link {{alertData.textClass}}"
                            href="javascript:void(0)">{{alertData.title |
                            lowercase}}
                        </a> with an example link. Check it out.</p>
                </div>
                }
            </div>
        </div>
    </div>
</div>
}

import { Component } from '@angular/core';
import * as Data from '../../../../shared/data/data/ui-kits/alert';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-dark-theme',
  imports: [CommonModule],
  templateUrl: './dark-theme.component.html',
  styleUrls: ['./dark-theme.component.scss']
})

export class DarkThemeComponent {

  public darkThemeAlertData = Data.darkThemeAlertData;

}

export interface commonAlert {
    header?: string;
    desc?: string;
    data1: data[];
    data2: data[];
}

export interface data {
    title: string;
    alertClass: string;
    textClass: string;
}

export const darkThemeAlertData: commonAlert[] = [
    {
        data1: [
            {
                title: 'Primary Alert',
                alertClass: 'primary dark',
                textClass: 'text-white',
            },
            {
                title: 'Secondary Alert',
                alertClass: 'secondary dark',
                textClass: 'text-white',
            },
            {
                title: 'Success Alert',
                alertClass: 'success dark',
                textClass: 'text-white',
            },
            {
                title: 'Info Alert',
                alertClass: 'info dark',
                textClass: 'text-white',
            },
        ],
        data2: [
            {
                title: 'Warning Alert',
                alertClass: 'warning dark',
                textClass: 'text-white',
            },
            {
                title: 'Danger Alert',
                alertClass: 'danger dark',
                textClass: 'text-white',
            },
            {
                title: 'Light Alert',
                alertClass: 'light dark',
                textClass: '',
            },
            {
                title: 'Dark Alert',
                alertClass: 'dark dark',
                textClass: 'text-white',
            },
        ]
    }
]

<div class="card">
    <div class="card-header">
      <h4>Basic popover</h4>
      <p class="f-m-light mt-1">
         Use the<code> data-bs-toggle='popover'</code>through popover above buttons. </p>
    </div>
    <div class="card-body common-flex popover-wrapper">
      <button class="btn btn-primary example-popover mb-0 me-0" type="button" data-bs-toggle="popover" placement="left" 
      popoverTitle="Basic Popover" ngbPopover="If the package restore doesn't help, you can look at the Output window in the Visual Studio.">Hurry Up! </button>
      <button class="example-popover btn btn-success mb-0 me-0" type="button" triggers="mouseenter:mouseleave" data-container="body" data-bs-toggle="popover" placement="bottom"  
      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.">Hover tooltip</button>
      <a class="btn btn-lg btn-secondary" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" placement="right"  
      popoverTitle="Dismissible popover"  ngbPopover="You are able to even develop and suggest improvements to the Bootstrap 4 before its final version is delivered.">Dismissible popover</a>
    </div>
</div>

<div class="card">
    <div class="card-header">
      <h4>Basic tooltip</h4>
      <p class="f-m-light mt-1">
         Use the <code>data-bs-title</code> to change tooltip title and <code>data-bs-toggle</code> to add tooltip attribute.</p>
    </div>
    <div class="card-body">
      <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>
  </div>

<div class="card height-equal">
    <div class="card-header">
        <h4>Basic dropdown</h4>
        <p class="f-m-light mt-1">
            When the<code>.show </code>class starts, dropdown appears. And <code>.btn-*</code> to change button dark
            background colors.</p>
    </div>
    <div class="card-body rtl-dropdown">
        <div class="common-flex">
            <div class="btn-group" ngbDropdown *ngFor="let allData of basicDropdownData">
                <button class="btn btn-{{allData.colorClass}} dropdown-toggle" type="button"
                    ngbDropdownToggle>{{allData.title}}</button>
                <ul class="dropdown-menu dropdown-block" ngbDropdownMenu>
                    <li *ngFor="let items of allData.dropdownItem">
                        <a class="dropdown-item" href="javascript:void(0)" ngbDropdownItem>{{items.item}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </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.component.html',
  styleUrls: ['./basic.component.scss']
})

export class BasicComponent {

  public basicDropdownData = Data.basicDropdownData;

}

<div class="card">
    <div class="card-header">
        <h4>Simple tabs</h4>
        <p class="mt-1 f-m-light">Use the <code>.nav-link</code> with <code>.show </code>class to jump particular tabs.
        </p>
    </div>
    <div class="card-body">
        <ul class="simple-wrapper nav nav-tabs" id="myTab" ngbNav #nav="ngbNav" [(activeId)]="active">
            <li class="nav-item" [ngbNavItem]="1">
                <a class="nav-link txt-primary" id="home-tab" ngbNavLink>Home</a>
                <ng-template ngbNavContent>
                    <p class="pt-3">Tabs have long been used to show alternative views of the same group of information
                        tabs in software. Known as<em class="txt-danger"> “module tabs”</em>, these are still used today
                        in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module
                        tabs to enable the user to switch between bookings for flights, hotels and car hire.</p>
                </ng-template>
            </li>
            <li class="nav-item" [ngbNavItem]="2">
                <a class="nav-link active txt-primary" id="profile-tabs" 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" id="contact-tab" 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" class="mt-2"></div>
    </div>
</div>

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

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

export class SimpleTabsComponent {

  public active = 2;

}

<div class="card">
    <div class="card-header">
      <h4>Simple accordion</h4>
      <p class="f-m-light mt-1">
        Click the accordions below to expand/collapse the accordion content.
        Use the <code>.accordion </code>.
      </p>
    </div>
    <div class="card-body">
      <div class="accordion dark-accordion" id="simpleaccordion" ngbAccordion [closeOthers]="true">
        <div class="accordion-item" ngbAccordionItem *ngFor="let allData of simpleAccordionData" [collapsed]="allData.panel !== 'First'">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button collapsed bg-light-primary txt-primary active" type="button" ngbAccordionButton>{{allData.title}}
              <app-feather-icons [class]="'svg-color'" [icons]="'chevron-down'"></app-feather-icons>
            </button>
          </h2>
          <div class="accordion-collapse collapse show" id="collapseOne"  ngbAccordionCollapse>
            <div class="accordion-body" ngbAccordionBody>
              <p [innerHTML]="allData.desc"></p>
            </div>
          </div>
        </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 { FeatherIconsComponent } from '../../../../shared/components/feather-icons/feather-icons.component';

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

export class SimpleAccordianComponent {

  public simpleAccordionData = Data.simpleAccordionData;

}

export const simpleAccordionData = [
    {
        panel : 'First',
        title : 'What do web designers do?',
        desc : 'Web design identifies the goals of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.',
    },
    {
        panel : 'Second',
        title : 'What is the use of web design?',
        desc : ' Search engine optimization:  Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.

 Mobile responsiveness: Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.

 Improved sales:Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.',
    },
    {
        panel : 'Third',
        title : 'What are the elements of web design?',
        desc : 'The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:
--> Layout
--> Images
--> Visual hierarchy
--> Color scheme
--> Typography
--> Navigation
--> Readability
--> Content',
    },
]