Navigation
Incline is built with Bootstrap 4, so you are free to use any of the original components that go with it.
Alerts
Badge
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Blockquote
The blockquote component has been extended with a footer image to add an author's photo.
I cannot find any other courier company that can match iLand's prices and customer service!
<blockquote class="blockquote mb-4">
<p>
I cannot find any other courier company that can match iLand's prices and customer service!
</p>
<footer class="text-muted">
<div class="avatar">
<img src="assets/img/16.jpg" alt="..." class="img-cover rounded-circle">
</div> John Doe, New York
</footer>
</blockquote>
Breadcrumb
The breadcrumb component has been modified to fit the area right under the navbar.
<nav class="breadcrumb">
<div class="container">
<div class="row align-items-center">
<div class="col">
<!-- Heading -->
<h5 class="breadcrumb-heading">
About
</h5>
</div>
<div class="col-auto">
<!-- Breadcrumb -->
<span class="breadcrumb-item">
<a href="index.html">Home</a>
</span>
<span class="breadcrumb-item active">
About
</span>
</div>
</div> <!-- / .row -->
</div> <!-- / .container -->
</nav>
Buttons
Outline and link buttons have been used throughout the theme.
-
.btn-circle- additional class to make the button circle. Works best with icons.
Card
Card title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum blanditiis cumque dolore vel velit temporibus eligendi aspernatur minus.
Primary button
Card title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum blanditiis cumque dolore vel velit temporibus eligendi aspernatur minus.
Primary buttonCard: Small
Reduces card vertical and horizontal spacings.
<div class="card card-sm">
<!-- Body -->
<div class="card-body">
...
</div>
</div>
Card: Large
Increases card vertical and horizontal spacings.
<div class="card card-lg">
<!-- Body -->
<div class="card-body">
...
</div>
</div>
Card: Tall
Adds increased padding at the top of the card. Add .card-standout to increase zoom it in.
Business courier service
Lorem ipsum dolor sit amet, consectetur adipisicing elit a amet dicta eum quae reiciendis.
Legal courier service
Lorem ipsum dolor sit amet, consectetur adipisicing elit a amet dicta eum quae reiciendis.
Personal courier service
Lorem ipsum dolor sit amet, consectetur adipisicing elit a amet dicta eum quae reiciendis.
<div class="card card-tall">
<!-- Body -->
<div class="card-body">
...
</div>
</div>
Card: Stretch
Stretches the card to the height of its parent container and centers its body vertically.
High-quality photos and detailed property description are available for you to make the right choice.
<div class="card card-stretch">
<!-- Body -->
<div class="card-body">
...
</div>
</div>
Dropdowns
Forms
The form component has been extended to add animated icons. Please focus to see the animation if your browser supports it. Feel free to replace the icon with any of the custom icons (see the Theme components page for the list of custom icons).
<form>
<div class="form-row">
<div class="input-group col-md-4 mb-2 mb-md-0">
<input type="email" class="form-control order-1" placeholder="Email address">
<div class="input-group-append order-0">
<div class="input-group-text">
<svg class="icon icon-envelope input-group-icon icon-offset" viewBox="0 0 106 106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path transform="translate(3 3)" d="M0 30 V 10 H 100 V 90 H 0 V 30 L 50 60 L 100 30"></path>
</svg>
</div>
</div>
</div>
<div class="col-md-auto">
<button type="submit" class="btn btn-outline-primary">
Sign up
</button>
</div>
</div>
</form>
List group
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Modal
The modal component has been extended to support video content. The local video file will start ones the modal is opened, and pause ones it is closed.
<div class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-header" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-video modal-lg" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<!-- Title -->
<h4 class="modal-title" id="modal-video-header">
Video demonstration
</h4>
<!-- Close -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Video -->
<video src="assets/video/elevator.mp4" class="img-fluid" controls></video>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- / .modal -->