Components

Typography Heading
<h1> H1. Bootstrap heading </h1> <p class="h1"> H1. Bootstrap heading </p>

H1 Bootstrap Heading

H2 Bootstrap Heading

H3 Bootstrap Heading

H4 Bootstrap Heading

H5 Bootstrap Heading
H6 Bootstrap Heading
Display Heading
<p class="display-1"> Display 1 </p>

Display 1

Display 2

Display 3

Display 4

Background Colors
<div class="bg-primary"> .bg-primary </div>

Text Colors
<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

Buttons
<a href="#" class="btn btn-primary"> Button </a>
Primary Secondary Success Warning Info Danger Blue Light Dark Link
Buttons Outline
<a href="#" class="btn btn-outline-primary"> Button </a>
Primary Secondary Success Warning Info Danger Blue Light Dark
Buttons Pills
<a href="#" class="btn btn-pills btn-primary"> Button </a>
Primary Secondary Success Warning Info Danger Blue Light dark
Buttons Pills Outline
<a href="#" class="btn btn-pills btn-outline-primary"> Button </a>
Primary Secondary Success Warning Info Danger Blue Light Dark
Buttons Sizes
<a href="#" class="btn btn-sm btn-primary"> Button </a>
Primary Secondary Success
Alerts
<div class="alert alert-primary" role="alert"> <i data-feather="star" class="fea icon-sm mr-2"></i> A simple primary alert—check it out! </div>
Alert link
<div class="alert alert-primary" role="alert"> <i data-feather="star" class="fea icon-sm mr-2"></i> A simple primary alert with <a href="javascript:void(0)" class="alert-link">an link</a> </div>
Alert (Additional Content)
<div class="alert alert-primary" role="alert">
   <h4 class="alert-heading"><i data-feather="star" class="fea mr-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>
Alert Dismissible
<div class="alert alert-success alert-dismissible fade show" role="alert">
   <strong><i data-feather="thumbs-up" class="fea icon-sm mr-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>
Alert (Advance Style)
<div class="alert alert-danger alert-pills" role="alert">
   <span class="badge badge-primary rounded-pill mr-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>
Avatar
<img src="images/xyz.jpg" class="img-fluid avatar avatar-ex-sm mr-2 rounded" alt="">
Rounded Avatar
<img src="images/xyz.jpg" class="img-fluid avatar avatar-ex-sm mr-2 rounded-circle" alt="">
Badges
<span class="badge badge-primary">primary</span>
Primary Secondary Success Danger Warning Info Blue Light Dark
Pill Badges
<span class="badge badge-pill badge-primary">primary</span>
Primary Secondary Success Danger Warning Info Blue Light Dark
Badges Outline
<span class="badge badge-outline-primary">primary</span>
Primary Secondary Success Danger Warning Info Blue Light Dark
Pill Badges outline
<span class="badge badge-pill badge-outline-primary">primary</span>
Primary Secondary Success Danger Warning Info Blue Light Dark
Link Badges
<a href="#" class="badge badge-primary">primary</a>
Primary Secondary Success Danger Warning Info Blue Light Dark
Dropdown
<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>
Accordions Style #1
Question #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.

Accordions Style #2
Question #4

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.

Navtabs

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.

Breadcrumb
<div class="page-next-level">
   <ul class="page-next px-0 mb-0">
     <li class="list-inline-item mr-1"><a href="#" class="text-dark pr-2">Home</a></li>
     <li class="list-inline-item mr-1"><a href="#" class="text-dark pr-2">Pages</a></li>
     <li class="list-inline-item mr-1">
       <span class="text-primary pr-2">Components</span>
       </li>
     <ul>
</div>
Blockquote

" There are many variations of passages of Lorem Ipsum available, by injected humour, or randomised words which don't look even slightly believable. "

Pagination
<ul class="pagination mb-0 list-unstyled">
   <li class="d-inline"><a href="#" class="float-left text-dark border pr-3 pl-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-left text-white border rounded pr-3 pl-3 pt-2 pb-2">1</a></li>
   <li class="d-inline"><a href="#" class="float-left text-dark border rounded pr-3 pl-3 pt-2 pb-2">2</a></li>
   <li class="d-inline"><a href="#" class="float-left text-dark border rounded pr-3 pl-3 pt-2 pb-2">3</a></li>
   <li class="d-inline"><a href="#" class="float-left text-dark border pr-3 pl-3 pt-2 pb-2"><i data-feather="chevrons-right" class="fea icon-sm"></i></a></li>
</ul>
Google Map
<div class="map">
   <iframe src="https://www.google.com/maps/(--Your location link via google map--)"> </iframe>
</div>
Progressbar
<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>
WordPress
84%
PHP / MYSQL
75%
Angular / JavaScript
79%
HTML
95%
Form
Checkbox
Radio Buttons
Switches Buttons
Subscribe Form
Modal
Tooltips
Icons
Feather Icon

There are 280+ Feather icons and you can get all icons info from here: https://feathericons.com/

Ex. <i data-feather="facebook" class="fea icon-sm""> </i>