Components

All Components and Elements are here,

Heading

Ex. <h1> H1. Bootstrap heading </h1>

H1. Bootstrap heading

H2. Bootstrap heading

H3. Bootstrap heading

H4. Bootstrap heading

H5. Bootstrap heading
H6. Bootstrap heading

Display

Ex. <p class="display-1"> Display 1 </p>

Display 1

Display 2

Display 3

Display 4

Buttons

Simple Buttons
Ex. <a href="javascript:void(0)" class="btn btn-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark Blue
Buttons Pills
Ex. <a href="javascript:void(0)" class="btn btn-primary rounded-pill"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark Blue
Outline Buttons
Ex. <a href="javascript:void(0)" class="btn btn-outline-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark Blue
Outline Buttons Pills
Ex. <a href="javascript:void(0)" class="btn btn-outline-primary rounded-pill"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark Blue
Buttons Sizing
Ex. <a href="javascript:void(0)" class="btn btn-primary btn-sm"> Primary </a>
Primary Warning Success

Alert

Simple Alert
Ex. <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>
Alert Link
Ex. <div class="alert alert-primary" role="alert"> A simple primary alert with <a href="javascript:void(0)" class="alert-link"></a>. </div>
Additional Content
Dismissing Alert
Ex. <div class="alert alert-success alert-dismissible fade show" role="alert"> <strong>Well done!</strong> You successfully read this important alert message. <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> × </span> </button> </div>
Modern Alert
Ex. <div class="alert alert-primary alert-pills" role="alert">
<span class="badge badge-danger badge-pill"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
Modern Alert Outline
Ex. <div class="alert alert-outline-primary alert-pills" role="alert">
<span class="badge badge-danger badge-pill"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>

Badges

Badges
Ex. <span class="badge badge-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark Blue
Badges Pills
Ex. <span class="badge badge-primary badge-pill"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark Blue
Badges Outlines
Ex. <span class="badge badge-outline-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark Blue
Badges Outline pills
Ex. <span class="badge badge-outline-primary badge-pill"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark Blue
Link Badges
Ex. <a href="javascript:void(0)" class="badge badge-primary"> primary </a>
Primary Secondary Success Danger Warning Info Light Dark Blue

Text Color

Ex. <div class="text-primary"> Quara Multipurpose Template & UI Kit </div>
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-white
.text-white-50
.text-dark
.text-blue

Navtabs

Start work with Quara. Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Start work with Quara. Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Start work with Quara. Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Modal

Breadcrumbs

Avatar

Default Avatar
Ex. <img src="images/home/01.jpg" class="img-fluid avatar avatar-small rounded">
Circle Avatar
Ex. <img src="images/home/01.jpg" class="img-fluid avatar avatar-small rounded-pill">
Thumbnail Avatar
Ex. <img src="images/home/01.jpg" class="img-fluid img-thumbnail avatar avatar-small rounded">

Accordion

Accordion #1

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

Pagination

Progressbar

WordPress
84%
PHP / MYSQL
75%
Angular / JavaScript
79%
HTML
95%

Forms & Inputs

Form
Checkboxes
Inline Checkboxes
Radio Buttons
Inline Radio Buttons
Switches Button

Icons

Material Design Icons

There are 4800+ Material Design icons and you can get all icons info from here: https://materialdesignicons.com/

Ex. <i class="mdi mdi-home"> </i>
Themify Icons

There are 320+ Themify icons and you can get all icons info from here: https://themify.me/themify-icons

Ex. <i class="ti-ruler-pencil"> </i>