Documentation

Introduction

Killar is a beautiful, modern, unique and 100% mobile responsive multipurpose HTML website for Sass, Agency, Business etc. Killar comes with lot's of features and build on latest Bootstrap Framework included user dashboard. It’s easy for customize, user and developer friendly to make any types of business website.

We put a lot of love and effort to make Killar a useful template for everyone and now It comes with 17+ unique home page. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases. Once you purchased Killar Template, you will be entitled to free download of all future updates for the same license.

Author: Themez Hub
Contact: [email protected]
website: https://Themezhub.com

NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules as it will help us to continue supporting our template and providing a free future updates.

Installation Guide

This is the simple static HTML template so no need any headech to install it.

Follow it very simple steps:

Main(demo folder) + assets (folder) = Enjoy your demo.

Folder Structure

we follow simple structure for the template

													
													killar-full-package
													  ├── 
													  │   └── Killar HTML Template/
													  │     └── All Html Pages
													  |
													  │	    └── assets/
													  │       └── Css
													  │            └── Style.css
													  │       └── Js
													  │            └── custom.js
													  |		  └── img
													  │            └── All Images
													  └──

Headings

All HTML headings, <h1> through <h6>, are available.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

													
														<h1>h1. Bootstrap heading</h1>
														<h2>h2. Bootstrap heading</h2>
														<h3>h3. Bootstrap heading</h3>
														<h4>h4. Bootstrap heading</h4>
														<h5>h5. Bootstrap heading</h5>
														<h6>h6. Bootstrap heading</h6>

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

													
														<h1 class="display-1">Display 1</h1>
														<h1 class="display-2">Display 2</h1>
														<h1 class="display-3">Display 3</h1>
														<h1 class="display-4">Display 4</h1>
														<h1 class="display-5">Display 5</h1>
														<h1 class="display-6">Display 6</h1>

Lists

Remove the default list-style and left margin on list items (immediate children only).

This is a list.
This is a list.
This is a list.
This is a list.
This is a list.
This is a list.

This is a list.
This is a list.
This is a list.
This is a list.
This is a list.
This is a list.

													
														<ul class="simple-list mb-3">
															<li>This is a list.</li>
															<li>This is a list.</li>
															<li>This is a list.</li>
															<li>This is a list.</li>
															<li>This is a list.</li>
															<li>This is a list.</li>
														</ul>
														<ul class="colored-list">
															<li>This is a list.</li>
															<li>This is a list.</li>
															<li>This is a list.</li>
															<li>This is a list.</li>
															<li>This is a list.</li>
															<li>This is a list.</li>
														</ul>

Buttons Variants

													
														<button type="button" class="btn btn-primary">Primary</button>
														<button type="button" class="btn btn-secondary">Secondary</button>
														<button type="button" class="btn btn-success">Success</button>
														<button type="button" class="btn btn-danger">Danger</button>
														<button type="button" class="btn btn-warning">Warning</button>
														<button type="button" class="btn btn-info">Info</button>
														<button type="button" class="btn btn-light">Light</button>
														<button type="button" class="btn btn-dark">Dark</button>

														<button type="button" class="btn btn-link">Link</button>

Outline Buttons

													
														<button type="button" class="btn btn-outline-primary">Primary</button>
														<button type="button" class="btn btn-outline-secondary">Secondary</button>
														<button type="button" class="btn btn-outline-success">Success</button>
														<button type="button" class="btn btn-outline-danger">Danger</button>
														<button type="button" class="btn btn-outline-warning">Warning</button>
														<button type="button" class="btn btn-outline-info">Info</button>
														<button type="button" class="btn btn-outline-light">Light</button>
														<button type="button" class="btn btn-outline-dark">Dark</button>

Buttons Sizes

													
														<button type="button" class="btn btn-primary btn-lg">Light</button>
														<button type="button" class="btn btn-dark btn-lg">Dark</button>

Alerts Examples

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success).

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

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

Icons Alerts

An example alert with an icon

An example success alert with an icon

An example warning alert with an icon

An example danger alert with an icon

													
														<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
														  <symbol id="check-circle-fill" viewBox="0 0 16 16">
															<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
														  </symbol>
														  <symbol id="info-fill" viewBox="0 0 16 16">
															<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
														  </symbol>
														  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
															<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
														  </symbol>
														</svg>

														<div class="alert alert-primary d-flex align-items-center" role="alert">
														  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
														  <div>
															An example alert with an icon
														  </div>
														</div>
														<div class="alert alert-success d-flex align-items-center" role="alert">
														  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
														  <div>
															An example success alert with an icon
														  </div>
														</div>
														<div class="alert alert-warning d-flex align-items-center" role="alert">
														  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
														  <div>
															An example warning alert with an icon
														  </div>
														</div>
														<div class="alert alert-danger d-flex align-items-center" role="alert">
														  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
														  <div>
															An example danger alert with an icon
														  </div>
														</div>

Dismiss Alerts

Holy guacamole! You should check in on some of those fields below.

													
														<div class="alert alert-warning alert-dismissible fade show" role="alert">
														  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
														  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
														</div>
														<div class="alert alert-success alert-dismissible fade show" role="alert">
														  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
														  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
														</div>
														<div class="alert alert-info alert-dismissible fade show" role="alert">
														  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
														  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
														</div>

Avatar With Text

Available With w-1 to w-20 same is height.

DP AK MP

													
														<span class="avatar bg-success text-success w-15 h-15 me-4"><span class="fs-30">DP</span></span>
														<span class="avatar bg-light-warning text-warning w-12 h-12 me-4"><span class="fs-18">AK</span></span>
														<span class="avatar bg-light-info text-info w-10 h-10 me-4"><span class="fs-15">MP</span></span>

Image Avatar

Available With w-1 to w-20 same is height.

													
														<img class="avatar w-15 me-4" src="assets/img/team-1.jpg" alt="">
														<img class="avatar w-12 me-4" src="assets/img/team-1.jpg" alt="">
														<img class="avatar w-10 me-4" src="assets/img/team-1.jpg" alt="">

Accordion

Click the accordions below to expand/collapse the accordion content.

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

													
														<div class="accordion" id="accordionExample">
														  <div class="accordion-item">
															<h2 class="accordion-header">
															  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
																Accordion Item #1
															  </button>
															</h2>
															<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
															  <div class="accordion-body">
																<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
															  </div>
															</div>
														  </div>
														  <div class="accordion-item">
															<h2 class="accordion-header">
															  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
																Accordion Item #2
															  </button>
															</h2>
															<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
															  <div class="accordion-body">
																<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
															  </div>
															</div>
														  </div>
														  <div class="accordion-item">
															<h2 class="accordion-header">
															  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
																Accordion Item #3
															  </button>
															</h2>
															<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
															  <div class="accordion-body">
																<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
															  </div>
															</div>
														  </div>
														</div>

Flush Accordion

Click the accordions below to expand/collapse the accordion content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

													
														<div class="accordion accordion-flush" id="accordionFlushExample">
														  <div class="accordion-item">
															<h2 class="accordion-header">
															  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
																Accordion Item #1
															  </button>
															</h2>
															<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
															  <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
															</div>
														  </div>
														  <div class="accordion-item">
															<h2 class="accordion-header">
															  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
																Accordion Item #2
															  </button>
															</h2>
															<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
															  <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
															</div>
														  </div>
														  <div class="accordion-item">
															<h2 class="accordion-header">
															  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
																Accordion Item #3
															  </button>
															</h2>
															<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
															  <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
															</div>
														  </div>
														</div>

All open Accordion

Click the accordions below to expand/collapse the accordion content.

													
														<div class="accordion" id="accordionPanelsStayOpenExample">
														  <div class="accordion-item">
															<h2 class="accordion-header">
															  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
																Accordion Item #1
															  </button>
															</h2>
															<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
															  <div class="accordion-body">
																<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
															  </div>
															</div>
														  </div>
														  <div class="accordion-item">
															<h2 class="accordion-header">
															  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
																Accordion Item #2
															  </button>
															</h2>
															<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
															  <div class="accordion-body">
																<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
															  </div>
															</div>
														  </div>
														  <div class="accordion-item">
															<h2 class="accordion-header">
															  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
																Accordion Item #3
															  </button>
															</h2>
															<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
															  <div class="accordion-body">
																<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
															  </div>
															</div>
														  </div>
														</div>

Nav Tabs Simple

Lorem ipsum dolor sit amet, ea eos adhuc laboramus persecuti, dignissim signiferumque no qui. Id feugiat phaedrum adolescens ius, oratio quidam reformidans in vim, vide error graeci ad est. In per iuvaret assueverit intellegebat. Vix at vidisse invidunt, ignota persius eu nec, ea debitis epicuri propriae pri.

													
														<ul class="nav nav-tabs" id="myTab" role="tablist">
														  <li class="nav-item" role="presentation">
															<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
														  </li>
														  <li class="nav-item" role="presentation">
															<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
														  </li>
														  <li class="nav-item" role="presentation">
															<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
														  </li>
														  <li class="nav-item" role="presentation">
															<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
														  </li>
														</ul>
														<div class="tab-content" id="myTabContent">
														  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
														  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
														  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
														  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
														</div>

Nav tabs

													
														<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
															<li class="nav-item" role="presentation">
																<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
															</li>
															<li class="nav-item" role="presentation">
																<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
															</li>
															<li class="nav-item" role="presentation">
																<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
															</li>
															<li class="nav-item" role="presentation">
																<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
															</li>
														</ul>
														<div class="tab-content" id="pills-tabContent">
															<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
																<p>Lorem ipsum dolor sit amet, ea eos adhuc laboramus persecuti, dignissim signiferumque no qui. Id feugiat phaedrum adolescens ius, oratio quidam reformidans in vim, vide error graeci ad est. In per iuvaret assueverit intellegebat. Vix at vidisse invidunt, ignota persius eu nec, ea debitis epicuri propriae pri. </p>
															</div>
															<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
																<p>Lorem ipsum dolor sit amet, ea eos adhuc laboramus persecuti, dignissim signiferumque no qui. Id feugiat phaedrum adolescens ius, oratio quidam reformidans in vim, vide error graeci ad est. In per iuvaret assueverit intellegebat. Vix at vidisse invidunt, ignota persius eu nec, ea debitis epicuri propriae pri. </p>
															</div>
															<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
																<p>Lorem ipsum dolor sit amet, ea eos adhuc laboramus persecuti, dignissim signiferumque no qui. Id feugiat phaedrum adolescens ius, oratio quidam reformidans in vim, vide error graeci ad est. In per iuvaret assueverit intellegebat. Vix at vidisse invidunt, ignota persius eu nec, ea debitis epicuri propriae pri. </p>
															</div>
															<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">
																<p>Lorem ipsum dolor sit amet, ea eos adhuc laboramus persecuti, dignissim signiferumque no qui. Id feugiat phaedrum adolescens ius, oratio quidam reformidans in vim, vide error graeci ad est. In per iuvaret assueverit intellegebat. Vix at vidisse invidunt, ignota persius eu nec, ea debitis epicuri propriae pri. </p>
															</div>
														</div>

Nav tabs Light

													
														<ul class="nav nav-pills lights mb-3" id="pills-tab1" role="tablist">
															<li class="nav-item" role="presentation">
																<button class="nav-link active" id="pills-one-tab" data-bs-toggle="pill" data-bs-target="#pills-one" type="button" role="tab" aria-controls="pills-one" aria-selected="true">Home</button>
															</li>
															<li class="nav-item" role="presentation">
																<button class="nav-link" id="pills-prf-tab" data-bs-toggle="pill" data-bs-target="#pills-prf" type="button" role="tab" aria-controls="pills-prf" aria-selected="false">Profile</button>
															</li>
															<li class="nav-item" role="presentation">
																<button class="nav-link" id="pills-ctr-tab" data-bs-toggle="pill" data-bs-target="#pills-ctr" type="button" role="tab" aria-controls="pills-ctr" aria-selected="false">Contact</button>
															</li>
															<li class="nav-item" role="presentation">
																<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
															</li>
														</ul>
														<div class="tab-content" id="pills-tab1Content">
															<div class="tab-pane fade show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab" tabindex="0">
																<p>Lorem ipsum dolor sit amet, ea eos adhuc laboramus persecuti, dignissim signiferumque no qui. Id feugiat phaedrum adolescens ius, oratio quidam reformidans in vim, vide error graeci ad est. In per iuvaret assueverit intellegebat. Vix at vidisse invidunt, ignota persius eu nec, ea debitis epicuri propriae pri. </p>
															</div>
															<div class="tab-pane fade" id="pills-prf" role="tabpanel" aria-labelledby="pills-prf-tab" tabindex="0">
																<p>Lorem ipsum dolor sit amet, ea eos adhuc laboramus persecuti, dignissim signiferumque no qui. Id feugiat phaedrum adolescens ius, oratio quidam reformidans in vim, vide error graeci ad est. In per iuvaret assueverit intellegebat. Vix at vidisse invidunt, ignota persius eu nec, ea debitis epicuri propriae pri. </p>
															</div>
															<div class="tab-pane fade" id="pills-ctr" role="tabpanel" aria-labelledby="pills-ctr-tab" tabindex="0">
																<p>Lorem ipsum dolor sit amet, ea eos adhuc laboramus persecuti, dignissim signiferumque no qui. Id feugiat phaedrum adolescens ius, oratio quidam reformidans in vim, vide error graeci ad est. In per iuvaret assueverit intellegebat. Vix at vidisse invidunt, ignota persius eu nec, ea debitis epicuri propriae pri. </p>
															</div>
														</div>

Headings Badges

Example heading New

													
														<h1>Example heading <span class="badge bg-secondary">New</span></h1>
														<h2>Example heading <span class="badge bg-secondary">New</span></h2>
														<h3>Example heading <span class="badge bg-secondary">New</span></h3>
														<h4>Example heading <span class="badge bg-secondary">New</span></h4>
														<h5>Example heading <span class="badge bg-secondary">New</span></h5>
														<h6>Example heading <span class="badge bg-secondary">New</span></h6>

Background colors

Primary Secondary Success Danger Warning Info Light Dark

													
														<span class="badge text-bg-primary">Primary</span>
														<span class="badge text-bg-secondary">Secondary</span>
														<span class="badge text-bg-success">Success</span>
														<span class="badge text-bg-danger">Danger</span>
														<span class="badge text-bg-warning">Warning</span>
														<span class="badge text-bg-info">Info</span>
														<span class="badge text-bg-light">Light</span>
														<span class="badge text-bg-dark">Dark</span>

Form Example

Email address

Example textarea

													
														<div class="mb-3">
															<label for="exampleFormControlInput1" class="form-label">Email address</label>
															<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
														</div>
														<div class="mb-3">
															<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
															<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
														</div>

Form Sizing

													
														<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
														<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
														<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

Form Select

													
														<select class="form-select" aria-label="Default select example">
															<option selected>Open this select menu</option>
															<option value="1">One</option>
															<option value="2">Two</option>
															<option value="3">Three</option>
														</select>

Checksbox

Default checkbox

Checked checkbox

													
														<div class="form-check">
															<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
															<label class="form-check-label" for="flexCheckDefault">
																Default checkbox
															</label>
														</div>
														<div class="form-check">
															<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
															<label class="form-check-label" for="flexCheckChecked">
																Checked checkbox
															</label>
														</div>

Radiosbox

Default radio

Default checked radio

													
														<div class="form-check">
															<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
															<label class="form-check-label" for="flexRadioDefault1">
																Default radio
															</label>
														</div>
														<div class="form-check">
															<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
															<label class="form-check-label" for="flexRadioDefault2">
																Default checked radio
															</label>
														</div>

Switches

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input

													
														<div class="form-check form-switch">
															<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
															<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
														</div>
														<div class="form-check form-switch">
															<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
															<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
														</div>
														<div class="form-check form-switch">
															<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
															<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
														</div>
														<div class="form-check form-switch">
															<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
															<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
														</div>

Floating labels

Email address

Password

													
														<div class="form-floating mb-3">
														  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
														  <label for="floatingInput">Email address</label>
														</div>
														<div class="form-floating">
														  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
														  <label for="floatingPassword">Password</label>
														</div>

Card Example

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

													
														<div class="card border" style="width: 18rem;">
															<img src="..." class="card-img-top" alt="...">
															<div class="card-body">
																<h5 class="card-title">Card title</h5>
																<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
																<a href="#" class="btn btn-primary">Go somewhere</a>
															</div>
														</div>

Image Card

Some quick example text to build on the card title and make up the bulk of the card's content.

													
														<div class="card border" style="width: 18rem;">
															<img src="..." class="card-img-top" alt="...">
															<div class="card-body">
																<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
															</div>
														</div>

List Card

Featured

An item
A second item
A third item

													
														<div class="card border" style="width: 18rem;">
															<div class="card-header">
																Featured
															</div>
															<ul class="list-group list-group-flush">
																<li class="list-group-item">An item</li>
																<li class="list-group-item">A second item</li>
																<li class="list-group-item">A third item</li>
															</ul>
														</div>

Simple table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

													
														<table class="table">
															<thead>
																<tr>
																	<th scope="col">#</th>
																	<th scope="col">First</th>
																	<th scope="col">Last</th>
																	<th scope="col">Handle</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																  <th scope="row">1</th>
																  <td>Mark</td>
																  <td>Otto</td>
																  <td>@mdo</td>
																</tr>
																<tr>
																  <th scope="row">2</th>
																  <td>Jacob</td>
																  <td>Thornton</td>
																  <td>@fat</td>
																</tr>
																<tr>
																  <th scope="row">3</th>
																  <td colspan="2">Larry the Bird</td>
																  <td>@twitter</td>
																</tr>
															</tbody>
														</table>

Striped table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

													
														<table class="table table-striped">
															<thead>
																<tr>
																	<th scope="col">#</th>
																	<th scope="col">First</th>
																	<th scope="col">Last</th>
																	<th scope="col">Handle</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																  <th scope="row">1</th>
																  <td>Mark</td>
																  <td>Otto</td>
																  <td>@mdo</td>
																</tr>
																<tr>
																  <th scope="row">2</th>
																  <td>Jacob</td>
																  <td>Thornton</td>
																  <td>@fat</td>
																</tr>
																<tr>
																  <th scope="row">3</th>
																  <td colspan="2">Larry the Bird</td>
																  <td>@twitter</td>
																</tr>
															</tbody>
														</table>

Striped Dark table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

													
														<table class="table table-dark table-striped">
															<thead>
																<tr>
																	<th scope="col">#</th>
																	<th scope="col">First</th>
																	<th scope="col">Last</th>
																	<th scope="col">Handle</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																  <th scope="row">1</th>
																  <td>Mark</td>
																  <td>Otto</td>
																  <td>@mdo</td>
																</tr>
																<tr>
																  <th scope="row">2</th>
																  <td>Jacob</td>
																  <td>Thornton</td>
																  <td>@fat</td>
																</tr>
																<tr>
																  <th scope="row">3</th>
																  <td colspan="2">Larry the Bird</td>
																  <td>@twitter</td>
																</tr>
															</tbody>
														</table>

Hoverable rows

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

													
														<table class="table table-hover">
															<thead>
																<tr>
																	<th scope="col">#</th>
																	<th scope="col">First</th>
																	<th scope="col">Last</th>
																	<th scope="col">Handle</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																  <th scope="row">1</th>
																  <td>Mark</td>
																  <td>Otto</td>
																  <td>@mdo</td>
																</tr>
																<tr>
																  <th scope="row">2</th>
																  <td>Jacob</td>
																  <td>Thornton</td>
																  <td>@fat</td>
																</tr>
																<tr>
																  <th scope="row">3</th>
																  <td colspan="2">Larry the Bird</td>
																  <td>@twitter</td>
																</tr>
															</tbody>
														</table>

Hoverable Dark rows

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

													
														<table class="table table-dark table-hover">
															<thead>
																<tr>
																	<th scope="col">#</th>
																	<th scope="col">First</th>
																	<th scope="col">Last</th>
																	<th scope="col">Handle</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																  <th scope="row">1</th>
																  <td>Mark</td>
																  <td>Otto</td>
																  <td>@mdo</td>
																</tr>
																<tr>
																  <th scope="row">2</th>
																  <td>Jacob</td>
																  <td>Thornton</td>
																  <td>@fat</td>
																</tr>
																<tr>
																  <th scope="row">3</th>
																  <td colspan="2">Larry the Bird</td>
																  <td>@twitter</td>
																</tr>
															</tbody>
														</table>

Hoverable Striped rows

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

													
														<table class="table table-striped table-hover">
															<thead>
																<tr>
																	<th scope="col">#</th>
																	<th scope="col">First</th>
																	<th scope="col">Last</th>
																	<th scope="col">Handle</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																  <th scope="row">1</th>
																  <td>Mark</td>
																  <td>Otto</td>
																  <td>@mdo</td>
																</tr>
																<tr>
																  <th scope="row">2</th>
																  <td>Jacob</td>
																  <td>Thornton</td>
																  <td>@fat</td>
																</tr>
																<tr>
																  <th scope="row">3</th>
																  <td colspan="2">Larry the Bird</td>
																  <td>@twitter</td>
																</tr>
															</tbody>
														</table>

Progressbar

													
														<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar" style="width: 0%"></div>
														</div>
														<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar" style="width: 25%"></div>
														</div>
														<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar" style="width: 50%"></div>
														</div>
														<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar" style="width: 75%"></div>
														</div>
														<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar" style="width: 100%"></div>
														</div>

Progressbar Height

													
														<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
														  <div class="progress-bar" style="width: 25%"></div>
														</div>
														<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
														  <div class="progress-bar" style="width: 25%"></div>
														</div>

Striped progressbar

													
														<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar progress-bar-striped" style="width: 10%"></div>
														</div>
														<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
														</div>
														<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
														</div>
														<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
														</div>
														<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
														</div>

Animation progressbar

													
														<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
															<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
														</div>

Devider Breadcrumbs

													
														<nav aria-label="breadcrumb">
														  <ol class="breadcrumb">
															<li class="breadcrumb-item active" aria-current="page">Home</li>
														  </ol>
														</nav>

														<nav aria-label="breadcrumb">
														  <ol class="breadcrumb">
															<li class="breadcrumb-item"><a href="#">Home</a></li>
															<li class="breadcrumb-item active" aria-current="page">Library</li>
														  </ol>
														</nav>

														<nav aria-label="breadcrumb">
														  <ol class="breadcrumb">
															<li class="breadcrumb-item"><a href="#">Home</a></li>
															<li class="breadcrumb-item"><a href="#">Library</a></li>
															<li class="breadcrumb-item active" aria-current="page">Data</li>
														  </ol>
														</nav>

Arrow Breadcrumbs

													
														<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");" aria-label="breadcrumb">
														  <ol class="breadcrumb">
															<li class="breadcrumb-item"><a href="#">Home</a></li>
															<li class="breadcrumb-item active" aria-current="page">Library</li>
														  </ol>
														</nav>

Work Step

Guide To Build Invoice

Think of a news blog that's filled with humorous or offensive, an unacceptable content hourly on the day of going live.

Manage Your Task

Think of a news blog that's filled with humorous or offensive, an unacceptable content hourly on the day of going live.

Make your transaction

Think of a news blog that's filled with humorous or offensive, an unacceptable content hourly on the day of going live.

													
														<div class="step-services mt-4">
															<div class="work-step">
																<div class="work-thumb-icons">
																	<span class="work-icon-box bg-primary border border-4 border-light-primary"><i class="fa-solid fa-layer-group fs-4"></i></span>
																	<span class="work-icon-box-line bg-primary"></span>
																</div>
																<div class="work-box-text">
																	<h4 class="fw-semibold text-dark mb-1">Guide To Build Invoice</h4>
																	<p class="mb-0">Think of a news blog that's filled with humorous or offensive, an unacceptable content hourly on the day of going live.</p>
																</div>
															</div>
															<div class="work-step">
																<div class="work-thumb-icons">
																	<span class="work-icon-box bg-primary border border-4 border-light-primary"><i class="fa-solid fa-cubes-stacked fs-4"></i></span>
																	<span class="work-icon-box-line bg-primary"></span>
																</div>
																<div class="work-box-text">
																	<h4 class="fw-semibold text-dark mb-1">Manage Your Task</h4>
																	<p class="mb-0">Think of a news blog that's filled with humorous or offensive, an unacceptable content hourly on the day of going live.</p>
																</div>
															</div>
															<div class="work-step">
																<div class="work-thumb-icons">
																	<span class="work-icon-box bg-primary border border-4 border-light-primary"><i class="fa-solid fa-sack-dollar fs-4"></i></span>
																	<span class="work-icon-box-line bg-primary"></span>
																</div>
																<div class="work-box-text">
																	<h4 class="fw-semibold text-dark mb-1">Make your transaction</h4>
																	<p class="mb-0">Think of a news blog that's filled with humorous or offensive, an unacceptable content hourly on the day of going live.</p>
																</div>
															</div>
														</div>

Color Spinners

													
														<div class="spinner-border text-primary" role="status">
															<span class="visually-hidden">Loading...</span>
														</div>
														<div class="spinner-border text-secondary" role="status">
															<span class="visually-hidden">Loading...</span>
														</div>
														<div class="spinner-border text-success" role="status">
															<span class="visually-hidden">Loading...</span>
														</div>
														<div class="spinner-border text-danger" role="status">
															<span class="visually-hidden">Loading...</span>
														</div>
														<div class="spinner-border text-warning" role="status">
															<span class="visually-hidden">Loading...</span>
														</div>
														<div class="spinner-border text-info" role="status">
															<span class="visually-hidden">Loading...</span>
														</div>
														<div class="spinner-border text-light" role="status">
															<span class="visually-hidden">Loading...</span>
														</div>
														<div class="spinner-border text-dark" role="status">
															<span class="visually-hidden">Loading...</span>
														</div>

Border

													
														<span class="w-17 h-17 d-inline-block me-2 border"></span>
														<span class="w-17 h-17 d-inline-block me-2 border-top"></span>
														<span class="w-17 h-17 d-inline-block me-2 border-end"></span>
														<span class="w-17 h-17 d-inline-block me-2 border-bottom"></span>
														<span class="w-17 h-17 d-inline-block me-2 border-start"></span>

Border Width

													
														<span class="w-17 h-17 d-inline-block me-2 border border-1"></span>
														<span class="w-17 h-17 d-inline-block me-2 border-top border-2"></span>
														<span class="w-17 h-17 d-inline-block me-2 border-end border-3"></span>
														<span class="w-17 h-17 d-inline-block me-2 border border-2"></span>
														<span class="w-17 h-17 d-inline-block me-2 border border-3"></span>

Border With Radius

													
														<img src="assets/img/blog-1.jpg" width="90" class="rounded" alt="...">
														<img src="assets/img/blog-1.jpg" width="90" class="rounded-top" alt="...">
														<img src="assets/img/blog-1.jpg" width="90" class="rounded-end" alt="...">
														<img src="assets/img/blog-1.jpg" width="90" class="rounded-bottom" alt="...">
														<img src="assets/img/blog-1.jpg" width="90" class="rounded-start" alt="...">
														<img src="assets/img/blog-1.jpg" width="90" class="rounded-circle" alt="...">
														<img src="assets/img/blog-1.jpg" width="90" class="rounded-pill" alt="...">

Modal

													
														<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#login">
														  Launch demo modal
														</button>

Credit

Plugin Name	Discription	Link
Jquery	Jquery Plugin	Open Source
Bootstrap 5	Powerful Framework	Open Source
Prizm	Perfect Code Highliter	Open Source
Image Loaded	Image Loaded Js plugin	Open Source
Range Slider	Powerful Ion Range Slider	Open Source
Suffle	Suffle Plugin For Portfolio	Open Source
Slick Slider	Slick Carousel	Open Source
CounterUp	Count Your Achievement	Open Source
Freepic	Wonderful Images Library	Open Source
Unsplash	Free Images Hub	Open Source
Fontawesome	Free 2000+ Fonts	Open Source
FlatIcons	Free Images Icons	Open Source
Google Font	Free Google Fonts	Open Source

Corporate & Agency

Sass Landing V.01

Sass Landing V.02

Sass Landing V.03

App & Software

Business StartUp

Software 7 Tools

App Development

Landing Page

App Landing Page

SEO Solutions

SEO/SMO Services

Digital Marketing

Payment Transfer V.01

Payment Transfer V.02

Payment Transfer V.03

CV & Resume

Documentation

Introduction

Installation Guide

Folder Structure

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Display headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Lists

Buttons Variants

Outline Buttons

Buttons Sizes

Alerts Examples

Icons Alerts

Dismiss Alerts

Avatar With Text

Image Avatar

Accordion

Accordion Item #1

Accordion Item #2

Accordion Item #3

Flush Accordion

Accordion Item #1

Accordion Item #2

Accordion Item #3

All open Accordion

Accordion Item #1

Accordion Item #2

Accordion Item #3

Nav Tabs Simple

Nav tabs

Nav tabs Light

Headings Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Background colors

Form Example

Form Sizing

Form Select

Checksbox

Radiosbox

Switches

Floating labels

Card Example

Card title

Image Card

List Card

Simple table

Striped table