Incline is built with Bootstrap 4, so you are free to use any of the original components that go with it.

Alerts

Primary alert
Success alert
Danger alert
Warning alert
Info alert

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!

...
John Doe, New York
              <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>

Buttons

Outline and link buttons have been used throughout the theme.

  • .btn-circle - additional class to make the button circle. Works best with icons.

Button large Button normal Button small Button link

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 button

Card: Small

Reduces card vertical and horizontal spacings.

...
Richard Roe, Creative Director
...
Ann Doe, Designer
...
Jane Doe, Copywriter
<div class="card card-sm">
  
  <!-- Body -->
  <div class="card-body">
    ...
  </div>

</div>

Card: Large

Increases card vertical and horizontal spacings.

Bronze plan

$49.99 / mo

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Aliquam quis perferendis, quas fugiat. Iste quisquam sit
  • Cum ab error sit totam nemo
Get it now

Silver plan

$79.99 / mo

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Aliquam quis perferendis, quas fugiat. Iste quisquam sit
  • Cum ab error sit totam nemo
Get it now
<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>

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

Progress