@extends('layouts.default') @section('title', 'General UI Elements') @section('content')
  1. Home
  2. UI Elements
  3. General

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

<!-- 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>
@endsection @push('scripts') @endpush