Color Admin

- 5
  NOTIFICATIONS (5)

  ###### Server Error Reports

  3 minutes ago

  ###### John Smith

  Quisque pulvinar tellus sit amet sem scelerisque tincidunt.

  25 minutes ago

  ###### Olivia

  Quisque pulvinar tellus sit amet sem scelerisque tincidunt.

  35 minutes ago

  ###### New User Registered

  1 hour ago

  ###### New Email From John

  2 hour ago
  View more
- Adam Schwartz
  Edit Profile 2 Inbox Calendar Setting
  Log Out

- Sean Ngu Front end developer
- - Settings
  - Send Feedback
  - Helps

- Navigation
- Dashboard
  - Dashboard v1
  - Dashboard v2
  - Dashboard v3
- 10 Email
  - Inbox
  - Compose
  - Detail
- Widgets NEW
- UI Elements NEW
  - General
  - Typography
  - Tabs & Accordions
  - Unlimited Nav Tabs
  - Modal & Notification
  - Widget Boxes
  - Media Object
  - Buttons
  - Icons
  - Simple Line Icons
  - Ionicons
  - Tree View
  - Language Bar & Icon
  - Social Buttons
  - Intro JS
- Bootstrap 4 NEW
- Form Stuff NEW
  - Form Elements
  - Form Plugins
  - Form Slider + Switcher
  - Form Validation
  - Wizards
  - Wizards + Validation
  - WYSIWYG
  - X-Editable
  - Multiple File Upload
  - Summernote
  - Dropzone
- Tables
  - Basic Tables
  - Managed Tables
    - Default
    - Autofill
    - Buttons
    - ColReorder
    - Fixed Column
    - Fixed Header
    - KeyTable
    - Responsive
    - RowReorder
    - Scroller
    - Select
    - Extension Combination
- Front End
  - One Page Parallax
  - Blog
  - Forum
  - E-Commerce
- Email Template
  - System Template
  - Newsletter Template
- Chart NEW
  - Flot Chart
  - Morris Chart
  - Chart JS
  - d3 Chart
  - Apex Chart
- Calendar
- Map
  - Vector Map
  - Google Map
- Gallery
  - Gallery v1
  - Gallery v2
- Page Options
  - Blank Page
  - Page with Footer
  - Page without Sidebar
  - Page with Right Sidebar
  - Page with Minified Sidebar
  - Page with Two Sidebar
  - Page with Line Icons
  - Page with Ionicons
  - Full Height Content
  - Page with Wide Sidebar
  - Page with Light Sidebar
  - Page with Mega Menu
  - Page with Top Menu
  - Page with Boxed Layout
  - Page with Mixed Menu
  - Boxed Layout with Mixed Menu
  - Page with Transparent Sidebar
- Extra
  - Timeline
  - Coming Soon Page
  - Search Results
  - Invoice
  - 404 Error Page
  - Profile Page
- Login & Register
  - Login
  - Login v2
  - Login v3
  - Register v3
- Version NEW
  - HTML
  - AJAX
  - ANGULAR JS
  - ANGULAR JS 8
  - LARAVEL
  - VUE JS
  - REACT JS
  - MATERIAL DESIGN
  - APPLE DESIGN
  - TRANSPARENT DESIGN
  - FACEBOOK DESIGN
- Helper
  - Predefined CSS Classes
- Menu Level
  - Menu 1.1
    - Menu 2.1
      - Menu 3.1
      - Menu 3.2
    - Menu 2.2
    - Menu 2.3
  - Menu 1.2
  - Menu 1.3

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

- «
- 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>

##### App Settings

Header Fixed
Header Inverse
Sidebar Fixed
Sidebar Grid
Sidebar Gradient

##### Admin Design (5)

##### Language Version (7)

##### Frontend Design (4)

Documentation Reset Local Storage