Basic UI Elements
Buttons Preview link
<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>Tag & pills Preview link
<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>Progressbar Preview link
<p><ngb-progressbar type="success" [value]="25"></ngb-progressbar></p>
<p><ngb-progressbar type="info" [value]="50"></ngb-progressbar></p>
<p><ngb-progressbar type="warning" [value]="75"></ngb-progressbar></p>
<p><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></p>
<p><ngb-progressbar type="primary" [value]="75"></ngb-progressbar></p>
<p><ngb-progressbar type="secondary" [value]="50"></ngb-progressbar></p>
<p><ngb-progressbar type="dark" [value]="25"></ngb-progressbar></p>Alert Preview link
<p>
<ngb-alert [dismissible]="false">
<strong>primary!</strong> This is a info alert—check it out!.
</ngb-alert>
</p>
<p>
<ngb-alert [dismissible]="false">
<strong>secondary!</strong> This is a info alert—check it out!.
</ngb-alert>
</p>Popover Preview link
<button type="button" class="btn btn-primary example-popover mr-1" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" data-bs-trigger="hover" class="example-popover btn btn-success" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover title" data-offset="-20px -20px" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." >On Hover Tooltip</button>
Tooltip Preview link
<button type="button" class="example-popover btn btn-primary" placement="top" ngbTooltip="Tooltip on top" >Hover Me</button>Dropdown Preview link
<div ngbDropdown class="d-inline-block">
<button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
dropdown button </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>
Tab Preview link
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
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
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
<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>
<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 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>
</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@us@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@us@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>
</div>Accordion Preview link
<div class="card">
<div class="card-header">
<h3>Simple accordion</h3>
</div>
<div class="card-body">
<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-feathericon [icon]="'chevron-down'" class="svg-color"></app-feathericon></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>
</div>
</div>