<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 mr-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 mr-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 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>
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 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>
<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>
<img src="images/xyz.jpg" class="img-fluid avatar avatar-ex-sm mr-2 rounded" alt="">
<img src="images/xyz.jpg" class="img-fluid avatar avatar-ex-sm mr-2 rounded-circle" alt="">
<span class="badge badge-primary">primary</span>
<span class="badge badge-pill badge-primary">primary</span>
<span class="badge badge-outline-primary">primary</span>
<span class="badge badge-pill badge-outline-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>
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.
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.
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 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>
" 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-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>
<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>