- Overview
- Landing
- Pages
-
Portfolio
-
- Portfolio Detail
- Work Details
- Work Details Two New
- Work Details Three New
- Blogs
- Components
<h1> H1. Bootstrap heading </h1>
<p class="h1"> H1. Bootstrap heading </p>
<p class="display-1"> Display 1 </p>
Display 1
Display 2
Display 3
Display 4
<div class="bg-primary"> .bg-primary </div>
<p class="text-primary"> .text-primary </p>
.text-primary
.text-secondary
.text-success
.text-danger
.text-blue
.text-warning
.text-info
.text-light
.text-white
.text-white-50
.text-dark
<div class="alert alert-primary" role="alert"> <i data-feather="star" class="fea icon-sm me-2"></i> A simple primary alert—check it out! </div>
<div class="alert alert-primary" role="alert"> <i data-feather="star" class="fea icon-sm me-2"></i> A simple primary alert with <a href="javascript:void(0)" class="alert-link">an link</a> </div>
<div class="alert alert-primary" role="alert">
<h4 class="alert-heading"><i data-feather="star" class="fea me-2"></i>Well done !</h4>
<p>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.</p>
</div>
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.
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong><i data-feather="thumbs-up" class="fea icon-sm me-2"></i>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>
<div class="alert alert-danger alert-pills" role="alert">
<span class="badge bg-primary rounded-pill me-1">New</span>
<span class="content">A Modern danger alert—check it out! <i data-feather="chevron-right" class="fea icon-sm"></i></span>
</div>
<img src="images/xyz.jpg" class="img-fluid avatar avatar-ex-sm me-2 rounded" alt="">
<img src="images/xyz.jpg" class="img-fluid avatar avatar-ex-sm me-2 rounded-pill" alt="">
<span class="badge bg-primary">primary</span>
<span class="badge rounded-pill bg-primary">primary</span>
<div class="btn-group dropdown-primary">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Home</a>
<a class="dropdown-item" href="#">Services</a>
<a class="dropdown-item" href="#">About us</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact us</a>
</div>
</div>
You can combine all the Landrick templates into a single one, you can take a component from the Application theme and use it in the Website.
You can combine all the Landrick templates into a single one, you can take a component from the Application theme and use it in the Website.
You can combine all the Landrick templates into a single one, you can take a component from the Application theme and use it in the Website.
<div class="page-next-level">
<ul class="page-next px-0 mb-0">
<li class="list-inline-item me-1"><a href="#" class="text-dark pe-2">Home</a></li>
<li class="list-inline-item me-1"><a href="#" class="text-dark pe-2">Pages</a></li>
<li class="list-inline-item me-1">
<span class="text-primary pe-2">Components</span>
</li>
<ul>
</div>
" There are many variations of passages of Lorem Ipsum available, by injected humour, or randomised words which don't look even slightly believable. "
<ul class="pagination mb-0 list-unstyled">
<li class="d-inline"><a href="#" class="float-start text-dark border pe-3 ps-3 pt-2 pb-2"><i data-feather="chevrons-left" class="fea icon-sm"></i></a></li>
<li class="active d-inline"><a href="#" class="float-start text-white border rounded pe-3 ps-3 pt-2 pb-2">1</a></li>
<li class="d-inline"><a href="#" class="float-start text-dark border rounded pe-3 ps-3 pt-2 pb-2">2</a></li>
<li class="d-inline"><a href="#" class="float-start text-dark border rounded pe-3 ps-3 pt-2 pb-2">3</a></li>
<li class="d-inline"><a href="#" class="float-start text-dark border pe-3 ps-3 pt-2 pb-2"><i data-feather="chevrons-right" class="fea icon-sm"></i></a></li>
</ul>
<div class="map">
<iframe src="https://www.google.com/maps/(--Your location link via google map--)"> </iframe>
</div>
<div class="progress-box">
<h6 class="title text-muted">HTML</h6>
<div class="progress rounded-0">
<div class="progress-bar rounded-0 position-relative bg-primary" style="width:84%;">
<div class="progress-value d-block text-muted h6"></div>
</div>
</div>
</div>
There are 280+ Feather icons and you can get all icons info from here: https://feathericons.com/
<i data-feather="facebook" class="fea icon-sm""> </i>