Loading...
Color Admin Material

- search
- inbox 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
- Hi, John Smith
  Edit Profile 2 Inbox Calendar Setting
  Log Out

close

- John Smith Front end developer
- - Settings
  - Send Feedback
  - Helps

- Navigation
- home Dashboard
  - Dashboard v1
  - Dashboard v2
  - Dashboard v3
- 10 inbox Email
  - Inbox
  - Compose
  - Detail
- extension Widgets NEW
- toys 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
- insert_drive_file Form Stuff NEW
  - Form Elements
  - Form Plugins
  - Form Slider + Switcher
  - Form Validation
  - Wizards
  - Wizards + Validation
  - WYSIWYG
  - X-Editable
  - Multiple File Upload
  - Summernote
  - Dropzone
- grid_on Tables
  - Basic Tables
  - Managed Tables
    - Default
    - Autofill
    - Buttons
    - ColReorder
    - Fixed Column
    - Fixed Header
    - KeyTable
    - Responsive
    - RowReorder
    - Scroller
    - Select
    - Extension Combination
- polymer Front End
  - One Page Parallax
  - Blog
  - Forum
  - E-Commerce
- email Email Template
  - System Template
  - Newsletter Template
- insert_chart Chart NEW
  - Flot Chart
  - Morris Chart
  - Chart JS
  - d3 Chart
  - Apex Chart
- date_range Calendar
- place Map
  - Vector Map
  - Google Map
- camera Gallery
  - Gallery v1
  - Gallery v2
- settings 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 Small 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
- card_giftcard Extra
  - Timeline
  - Coming Soon Page
  - Search Results
  - Invoice
  - 404 Error Page
  - Profile Page
- lock Login & Register
  - Login
  - Login v2
  - Login v3
  - Register v3
- apps Version NEW
  - HTML
  - AJAX
  - ANGULAR JS
  - ANGULAR JS 8
  - LARAVEL
  - VUE JS
  - REACT JS
  - MATERIAL DESIGN
  - APPLE DESIGN
  - TRANSPARENT DESIGN
  - FACEBOOK DESIGN
- help Helper
  - Predefined CSS Classes
- list 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. Widget Boxes

# Widget Boxes header small text goes here...

#### Panel (Default)

Panel Content Here

    <div class="panel panel-inverse" data-sortable-id="ui-widget-1">
      <div class="panel-heading">
        <h4 class="panel-title">Panel Title</h4>
        <div class="panel-heading-btn">
          <a href="#" class="btn btn-xs btn-icon btn-circle btn-default"
            data-click="panel-expand">
            <i class="fa fa-expand"></i>
          </a>
          ...
        </div>
      </div>
      <div class="panel-body">
        <p>Panel Content Here</p>
      </div>
    </div>

#### Panel Header with Dropdown

- Action
- Another action
- Something else here
- Separated link

Panel Content Here

    <div class="panel-heading">
      <h4 class="panel-title">Panel Header with Dropdown</h4>
      <div class="btn-group">
        <button type="button" class="btn btn-success btn-xs">Action</button>
        <button type="button" class="btn btn-success btn-xs dropdown-toggle"
          data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="javascript:;">Action</a></li>
          ...
        </ul>
      </div>
    </div>

#### Panel Header with Radio Button

Option 1 Option 2

Panel Content Here

    <div class="panel-heading">
      <h4 class="panel-title">Panel Header with Radio Button</h4>
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-success btn-xs active">
          <input type="radio" name="options" id="option1" checked /> Option 1
        </label>
        <label class="btn btn-success btn-xs">
          <input type="radio" name="options" id="option2" /> Option 2
        </label>
      </div>
    </div>

#### Panel Header with Progress Bar

40%

Panel Content Here

    <div class="panel-heading">
      <h4 class="panel-title">Panel Header with Progress Bar</h4>
      <div class="progress progress-sm m-t-5">
        <div class="progress-bar progress-bar-success progress-bar-striped progress-bar-animated" style="width: 40%">
          40%
        </div>
      </div>
    </div>

NEW

#### Panel Header with Label

Panel Content Here

    <div class="panel-heading">
      <h4 class="panel-title">
        <span class="label label-success m-r-10 pull-left">NEW</span>
        Panel Header with Label
      </h4>
    </div>

#### Panel with Alert Box

×

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac posuere lacus, quis suscipit sem. Nulla sagittis aliquam erat non convallis.

Panel Content Here

    <div class="panel panel-inverse">
      <div class="panel-heading">...</div>
      <div class="alert alert-success fade in">
        <span class="close" data-dismiss="alert">×</span>
        <i class="fa fa-check fa-2x pull-left m-r-10"></i>
        <p>...</p>
      </div>
      <div class="panel-body">...</div>
    </div>

#### Hover View Icon

Panel Content Here

    <div class="panel panel-inverse panel-hover-icon">
      ...
    </div>

#### Panel with Slimscroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed enim arcu. Ut posuere in ligula quis ultricies. In in justo turpis. Donec ut dui at massa gravida interdum nec vitae justo. Quisque ullamcorper vehicula dictum. Nullam hendrerit interdum eleifend. Aenean luctus sed arcu laoreet scelerisque. Vivamus non ullamcorper mauris, id sagittis lorem. Proin tincidunt mauris et dolor mattis imperdiet. Sed facilisis mattis diam elementum adipiscing.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ante velit, pretium non nisi a, egestas placerat diam. Nullam aliquet iaculis ultricies. Aliquam volutpat, sapien quis volutpat elementum, ligula purus auctor diam, at vestibulum nulla augue vel purus. Praesent ac nisl a magna tincidunt interdum sed in turpis. Maecenas nec condimentum risus. In congue pretium est, eget euismod tortor ornare quis.

Praesent eu ultrices justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras mattis ipsum quis sapien consectetur fringilla. Etiam sagittis sem tempus purus elementum, vitae pretium sapien porta. Curabitur iaculis ante ut aliquam luctus. Vivamus ullamcorper blandit imperdiet. Ut egestas, orci id rhoncus cursus, orci risus scelerisque enim, eget mattis eros lacus quis ligula. Vivamus ullamcorper urna eget hendrerit laoreet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi accumsan velit dolor. Donec convallis eleifend magna, at euismod tellus convallis a. Curabitur in nisi dolor. Cras viverra scelerisque orci, sed interdum ligula volutpat non. Nunc eu enim ac neque tempor feugiat. Duis posuere lacus non magna eleifend, non dictum sem feugiat. Duis eleifend condimentum pulvinar.

    <div class="panel panel-inverse">
      <div class="panel-heading">...</div>
      <div class="panel-body">
        <div data-scrollbar="true" data-height="280px">
          ...
        </div>
      </div>
    </div>

#### Panel with Toolbar & Footer

This is a form textarea.
Cancel Action

    <div class="panel panel-inverse">
      <div class="panel-heading">...</div>
      <div class="panel-toolbar">
        <div class="btn-group m-r-5">
          ...
        </div>
        <div class="btn-group">
          ...
        </div>
      </div>
      <textarea class="form-control no-rounded-corner" rows="5">...</textarea>
      <div class="panel-footer text-right">
        <a href="#" class="btn btn-white btn-sm">Cancel</a>
        <a href="#" class="btn btn-primary btn-sm m-l-5">Action</a>
      </div>
    </div>

#### Panel with Tabs

- Home
- Profile

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

    <div class="panel panel-default panel-with-tabs">
      <div class="panel-heading">
        <ul class="nav nav-tabs pull-right">
          <li class="nav-item">
            <a href="#home" data-toggle="tab" class="nav-link active">
              <i class="fa fa-home"></i>
              <span class="hidden-xs">Home</span>
            </a>
          </li>
          <li>
            <a href="#profile" data-toggle="tab">
              <i class="fa fa-user"></i>
              <span class="hidden-xs">Profile</span>
            </a>
          </li>
        </ul>
        <h4 class="panel-title">Panel with Tabs</h4>
      </div>
      <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">...</div>
        <div class="tab-pane fade in" id="profile">...</div>
      </div>
    </div>

### Panel Theme

#### Panel (Default)

Panel Content Here

    <div class="panel panel-default">...</div>

#### Panel Success

Panel Content Here

    <div class="panel panel-success">...</div>

#### Panel Warning

Panel Content Here

    <div class="panel panel-warning">...</div>

#### Panel Danger

Panel Content Here

    <div class="panel panel-danger">...</div>

#### Panel Inverse

Panel Content Here

    <div class="panel panel-inverse">...</div>

#### Panel Primary

Panel Content Here

    <div class="panel panel-primary">...</div>

#### Panel Info

Panel Content Here

    <div class="panel panel-info">...</div>

### Full Color Panel Theme

You can customize the panel body / header `background` & `text color` by adding predefined CSS class. E.g `.bg-black`. Full list of available predefined background class can be found here.

#### Full Color Panel

Panel Content Here

    <div class="panel panel-inverse">
      <div class="panel-heading">...</div>
      <div class="panel-body bg-dark text-white">...</div>
    </div>

#### Full Color Panel

Panel Content Here

    <div class="panel panel-primary">
      <div class="panel-heading">...</div>
      <div class="panel-body bg-blue text-white">...</div>
    </div>

#### Full Color Panel

Panel Content Here

    <div class="panel panel-success">
      <div class="panel-heading">...</div>
      <div class="panel-body bg-green text-white">...</div>
    </div>

#### Full Color Panel

Panel Content Here

    <div class="panel panel-warning">
      <div class="panel-heading">...</div>
      <div class="panel-body bg-orange text-white">...</div>
    </div>

#### Full Color Panel

Panel Content Here

    <div class="panel panel-danger">
      <div class="panel-heading">...</div>
      <div class="panel-body bg-red text-white">...</div>
    </div>

#### Full Color Panel

Panel Content Here

    <div class="panel panel-info">
      <div class="panel-heading">...</div>
      <div class="panel-body bg-aqua text-white">...</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
keyboard_arrow_up