Leaping - Creative Multipurpose Template

Display

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

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Buttons

Simple Buttons

Ex. `<a href="#" class="btn btn-primary"> Primary </a>`

Primary Secondary Success Danger Info Warning Light Dark

Buttons Pills

Ex. `<a href="#" class="btn btn-primary rounded-pill"> Primary </a>`

Primary Secondary Success Danger Info Warning Light Dark

Outline Buttons

Ex. `<a href="#" class="btn btn-outline-primary"> Primary </a>`

Primary Secondary Success Danger Info Warning Light Dark

Outline Buttons Pills

Ex. `<a href="#" class="btn btn-outline-primary rounded-pill"> Primary </a>`

Primary Secondary Success Danger Info Warning Light Dark

Buttons Sizing

Ex. `<a href="#" 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>`

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple danger alert—check it out!

Alert Link

Ex. `<div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link"></a>. </div>`

A simple primary alert with an link.

A simple secondary alert with an link.

A simple danger alert with an link.

Additional Content

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

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-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> × </span> </button> </div>`

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

Modern Alert

Ex. `<div class="alert alert-primary alert-pills" role="alert"> <span class="badge bg-danger rounded-pill"> New </span> <span class="alert-content"> A Modern primary alert—check it out! </span> </div>`

New A Modern primary alert—check it out!

New A Modern danger alert—check it out!

Modern Alert Outline

Ex. `<div class="alert alert-outline-primary alert-pills" role="alert"> <span class="badge bg-danger rounded-pill"> New </span> <span class="alert-content"> A Modern primary alert—check it out! </span> </div>`

New A Modern primary alert—check it out!

New A Modern danger alert—check it out!

Badges

Ex. `<span class="badge bg-primary"> primary </span>`

Primary Secondary Success Danger Warning Info Light Dark

Badges Pills

Ex. `<span class="badge bg-primary rounded-pill"> primary </span>`

Primary Secondary Success Danger Warning Info Light Dark

Link Badges

Ex. `<a href="#" class="badge bg-primary"> primary </a>`

Primary Secondary Success Danger Warning Info Light Dark

Text Color

Ex. `<div class="text-primary"> Leaping 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

Navtabs

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

Modal

Click Here

Breadcrumbs

Home
Pages
Components

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

There are many variations of Faff about only a quid blower I don’t want no agro bleeding chimney pot burke tosser cras nice one boot fanny.! passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

Components

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>

Buttons

Simple Buttons

Ex. <a href="#" class="btn btn-primary"> Primary </a>

Buttons Pills

Ex. <a href="#" class="btn btn-primary rounded-pill"> Primary </a>

Outline Buttons

Ex. <a href="#" class="btn btn-outline-primary"> Primary </a>

Outline Buttons Pills

Ex. <a href="#" class="btn btn-outline-primary rounded-pill"> Primary </a>

Buttons Sizing

Ex. <a href="#" class="btn btn-primary btn-sm"> Primary </a>

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="#" class="alert-link"></a>. </div>

Additional Content

Well done!

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-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 bg-danger rounded-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 bg-danger rounded-pill"> New </span> <span class="alert-content"> A Modern primary alert—check it out! </span> </div>

Badges

Badges

Ex. <span class="badge bg-primary"> primary </span>

Badges Pills

Ex. <span class="badge bg-primary rounded-pill"> primary </span>

Link Badges

Ex. <a href="#" class="badge bg-primary"> primary </a>

Text Color

Ex. <div class="text-primary"> Leaping 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

Navtabs

Home

About

Service

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

Based On Bootstrap 5

Built With SASS

Easy to customize

Pagination

Progressbar

WordPress

PHP / MYSQL

Angular / JavaScript

HTML

Forms & Inputs

Form

Checkboxes

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

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

Ex. `<a href="#" class="btn btn-primary"> Primary </a>`

Ex. `<a href="#" class="btn btn-primary rounded-pill"> Primary </a>`

Ex. `<a href="#" class="btn btn-outline-primary"> Primary </a>`

Ex. `<a href="#" class="btn btn-outline-primary rounded-pill"> Primary </a>`

Ex. `<a href="#" class="btn btn-primary btn-sm"> Primary </a>`

Ex. `<div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>`

Ex. `<div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link"></a>. </div>`

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-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> × </span> </button> </div>`

Ex. `<div class="alert alert-primary alert-pills" role="alert"> <span class="badge bg-danger rounded-pill"> New </span> <span class="alert-content"> A Modern primary alert—check it out! </span> </div>`

Ex. `<div class="alert alert-outline-primary alert-pills" role="alert"> <span class="badge bg-danger rounded-pill"> New </span> <span class="alert-content"> A Modern primary alert—check it out! </span> </div>`

Ex. `<span class="badge bg-primary"> primary </span>`

Ex. `<span class="badge bg-primary rounded-pill"> primary </span>`

Ex. `<a href="#" class="badge bg-primary"> primary </a>`

Ex. `<div class="text-primary"> Leaping Multipurpose Template & UI Kit </div>`

Ex. `<img src="images/home/01.jpg" class="img-fluid avatar avatar-small rounded">`

Ex. `<img src="images/home/01.jpg" class="img-fluid avatar avatar-small rounded-pill">`

Ex. `<img src="images/home/01.jpg" class="img-fluid img-thumbnail avatar avatar-small rounded">`

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