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

<div class="alert alert-primary" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-light" role="alert">This is a dark alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>

<div class="card">
    <div class="card-header card-no-border pb-0">
        <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" 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>
    </div>
</div>

<div class="card">
    <div class="card-header pb-0">
        <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>
        <h3 class="mb-1 py-4 pb-0">Inline Tooltip Content</h3>
        <p>
            Here, is some content about tooltips that you can set the<a class="txt-primary fw-bold" placement="top"
                ngbTooltip="popover text"> 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="common-flex">
    @for(basicdropdownitem of basicDropdownData; track basicdropdownitem){
       <div class="btn-group" ngbDropdown>
        <button class="btn {{basicdropdownitem.class}} dropdown-toggle" type="button"
             ngbDropdownToggle>{{basicdropdownitem.title}}</button>
        <ul class="dropdown-menu dropdown-block" ngbDropdownMenu>
             @for( basicData of basicdropdownitem.item; track basicData ){
              <li><a class="dropdown-item" href="javascript:void(0)" ngbDropdownItem>{{basicData.list}}</a></li>
             }
         </ul>
   </div>
   }
</div>

import { Component } from '@angular/core';
import * as Data from '../../../../shared/data/ui-kits/dropdown/dropdown';
import { NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-basic-dropdown',
    templateUrl: './basic-dropdown.html',
    styleUrls: ['./basic-dropdown.scss'],
    imports: [NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem]
})

export class BasicDropdown {

  public basicDropdownData = Data.basicDropdown;

}

export const basicDropdown = [
    {
        class: 'btn-primary text-white',
        title: 'Dashboard',
        item: [
            {
                list: 'Project',
            }, {
                list: 'Ecommerce',
            },
            {
                list: 'Crypto'
            },
        ]
    },
    {
        class: 'btn-secondary text-white',
        title: 'Ecommerce',
        item: [
            {
                list: 'Product',
            }, {
                list: 'Product details',
            },
            {
                list: 'Cart'
            },
        ]
    },
    {
        class: 'btn-warning text-black',
        title: 'Ui kits',
        item: [
            {
                list: 'Typography',
            }, {
                list: 'Avatar',
            },
            {
                list: 'Grid'
            },
        ]
    },
    {
        class: 'btn-danger text-white',
        title: 'Error page',
        item: [
            {
                list: 'Error 400',
            }, {
                list: 'Error 403',
            },
            {
                list: 'Error 500'
            },
        ]
    },
];

      

<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>
               <div class="tab-pane fade show" id="home">
                  <p class="pt-3">Tabs have long been used to show alternative views of the same group
                       ofinformation 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 enablethe user to switch between bookings for
                        flights, hotels and car hire.</p>
                  </div>
               </ng-template>
            </li>
          <li class="nav-item" [ngbNavItem]="2">
              <a class="nav-link  txt-primary" id="profile-tabs" ngbNavLink>Profile</a>
                <ng-template ngbNavContent>
                    <div class="tab-pane fade show" d="profile">
                      <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>
                     </div>
                 </ng-template>
             </li>
             <li class="nav-item" [ngbNavItem]="3">
                 <a class="nav-link txt-primary" id="contact-tab" ngbNavLink>Contact</a>
                 <ng-template ngbNavContent>
                     <div class="tab-pane fade show" id="contact">
                         <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>
                </div>
            </ng-template>
          </li>
    </ul>
   <div class="tab-content" id="myTabContent">
       <div [ngbNavOutlet]="nav" class="mt-4"></div>
   </div>             

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

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

export class SimpleTabs {

  public active = 2;

}

 <div class="accordion dark-accordion" id="simpleaccordion" ngbAccordion [closeOthers]="true">
    @for(simpleaccordionitem of simpleAccordionData; track simpleaccordionitem){
     <div class="accordion-item" ngbAccordionItem [collapsed]="simpleaccordionitem.panel !== 'First'">
        <h2 ngbAccordionHeader class="accordion-header" id="headingOne">
          <button class="accordion-button collapsed bg-light-primary font-primary active" type="button"
              ngbAccordionButton>{{simpleaccordionitem.title}}
              <app-feather-icons [icon]="'chevron-down'" class="svg-color"></app-feather-icons>
          </button>
      </h2>
      <div class="accordion-collapse {{simpleaccordionitem.class}}" id="collapseOne"
          aria-labelledby="headingOne" data-bs-parent="#simpleaccordion" ngbAccordionCollapse>
          <div class="accordion-body" ngbAccordionBody>
              <ng-template>
                  <p [innerHTML]="simpleaccordionitem.text"></p>
              </ng-template>
          </div>
      </div>
  </div>
  }
</div>

//ts file
import { Component } from '@angular/core';
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
import { simpleAccordion } from '../../../../shared/data/ui-kits/accordion/accordion';
import { FeathericonComponent } from "../../../../shared/component/feathericon/feathericon";

@Component({
    selector: 'app-simple-accordion',
    templateUrl: './simple-accordion.html',
    styleUrls: ['./simple-accordion.scss'],
    imports: [NgbAccordionModule, FeathericonComponent]
})
export class SimpleAccordion {

  public simpleAccordionData = simpleAccordion;

}

export const simpleAccordion = [
    {
        panel: 'First',
        title: 'What do web designers do?',
        text: '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.',
        class: 'collapse show'
    },
    {
        panel: 'Second',
        title: 'What is the use of web design?',
        text: '   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.',
        class: 'collapse '
    },
    {
        panel: 'Third',
        title: 'What are the elements of web design?',
        text: ' 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 
 
',
        class: 'collapse show'
    },
];