# General UI Elements header small text goes here...

#### Alerts

× Success! This is a success alert with an example link.

    <div class="alert alert-success fade show">
      <span class="close" data-dismiss="alert">×</span>
      <strong>Success!</strong>
      This is a success alert with
      <a href="#" class="alert-link">an example link</a>.
    </div>

#### Alerts Color NEW

× Primary alert with an example link.
× Info alert with an example link.
× Purple alert with an example link.
× Indigo alert with an example link.
× Success alert with an example link.
× Green alert with an example link.
× Lime alert with an example link.
× Warning alert with an example link.
× Yellow alert with an example link.
× Danger alert with an example link.
× Pink alert with an example link.
× Dark alert with an example link.
× Secondary alert with an example link.
× Light alert with an example link.

    <div class="alert alert-primary fade show">...</div>
    <div class="alert alert-secondary fade show">...</div>
    <div class="alert alert-success fade show">...</div>
    <div class="alert alert-danger fade show">...</div>
    <div class="alert alert-warning fade show">...</div>
    <div class="alert alert-yellow fade show">...</div>
    <div class="alert alert-info fade show">...</div>
    <div class="alert alert-lime fade show">...</div>
    <div class="alert alert-purple fade show">...</div>
    <div class="alert alert-light fade show">...</div>
    <div class="alert alert-dark fade show">...</div>
    <div class="alert alert-indigo fade show">...</div>
    <div class="alert alert-pink fade show">...</div>
    <div class="alert alert-green fade show">...</div>

#### Notes

#### Note with icon!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id gravida libero. Etiam semper id sem a ultricies.

#### Note with right icon!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id gravida libero. Etiam semper id sem a ultricies.

#### Note without icon!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id gravida libero. Etiam semper id sem a ultricies.

    <!-- default -->
    <div class="note note-primary">
      <div class="note-icon"><i class="fab fa-facebook-f"></i></div>
      <div class="note-content">
        <h4><b>Note with icon!</b></h4>
        <p> ... </p>
      </div>
    </div>

    <!-- with right icon -->
    <div class="note note-warning note-with-right-icon">
      <div class="note-icon"><i class="fa fa-lightbulb"></i></div>
      <div class="note-content text-right">
        <h4><b>Note with right icon!</b></h4>
        <p> ... </p>
      </div>
    </div>

#### Labels & Badges NEW

Danger Warning Yellow Lime Green Success
Primary Info Purple Indigo Dark
Pink Secondary Default Light
label
badge
badge-square

    <!-- label -->
    <span class="label label-inverse">label</span>

    <!-- badge -->
    <span class="badge badge-secondary">badge</span>

    <!-- badge-square -->
    <span class="badge badge-default badge-square">badge-square</span>

#### Pagination & Pager

- «
- 1
- 2
- 3
- 4
- 5
- »

- «
- 1
- 2
- 3
- 4
- 5
- »

- «
- 1
- 2
- 3
- 4
- 5
- »

- Previous
- Next

- ← Older
- Newer →

    <!-- pagination -->
    <ul class="pagination">
      <li class="page-item disabled"><a href="#" class="page-link">«</a></li>
      <li class="page-item active"><a href="#" class="page-link">1</a></li>
      <li class="page-item"><a href="#" class="page-link">2</a></li>
      <li class="page-item"><a href="#" class="page-link">3</a></li>
      <li class="page-item"><a href="#" class="page-link">4</a></li>
      <li class="page-item"><a href="#" class="page-link">5</a></li>
      <li class="page-item"><a href="#" class="page-link">»</a></li>
    </ul>

    <!-- pager -->
    <ul class="pager">
      <li><a href="#">Previous</a></li>
      <li><a href="#">Next</a></li>
    </ul>

#### Progress bar

Basic
Striped
Animated
Stacked
Stacked
Stacked

    <!-- default -->
    <div class="progress rounded-corner">
      <div class="progress-bar" style="width: 80%">Basic</div>
    </div>

    <!-- striped -->
    <div class="progress rounded-corner progress-striped">
      <div class="progress-bar bg-warning" style="width: 80%">
        Striped
      </div>
    </div>

    <!-- animated -->
    <div class="progress rounded-corner progress-striped active">
      <div class="progress-bar bg-purple" style="width: 80%">
        Animated
      </div>
    </div>

    <!-- stacked -->
    <div class="progress rounded-corner">
      <div class="progress-bar bg-dark" style="width: 25%">
        Stacked
      </div>
      <div class="progress-bar bg-grey" style="width: 25%"
        >Stacked
      </div>
      <div class="progress-bar bg-lime" style="width: 25%">
        Stacked
      </div>
    </div>