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. Buttons

# Buttons header small text goes here...

#### Buttons NEW

    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-grey">Grey</button>
    <button type="button" class="btn btn-purple">Purple</button>
    <button type="button" class="btn btn-indigo">Indigo</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-yellow">Yellow</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-pink">Pink</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-green">Green</button>
    <button type="button" class="btn btn-lime">Lime</button>
    <button type="button" class="btn btn-inverse">Inverse</button>
    <button type="button" class="btn btn-link">Link</button>

#### Button Dropdowns

Dropdown
Action 1 Action 2 Action 3
Action 4
Dropup
Action 1 Action 2 Action 3
Action 4

    <!-- dropdown -->
    <div class="btn-group">
      <a href="#" class="btn btn-default">Dropdown</a>
      <a href="#" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown"></a>
      <ul class="dropdown-menu pull-right">
        ...
      </ul>
    </div>

    <!-- dropup -->
    <div class="btn-group dropup">
      <a href="#" class="btn btn-default">Dropdown</a>
      <a href="#" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown"></a>
      <ul class="dropdown-menu pull-right">
        ...
      </ul>
    </div>

#### Button Sizes

Large Button Default Button Small Button Extra Small

    <a href="#" class="btn btn-primary btn-lg">Large Button</a>
    <a href="#" class="btn btn-primary">Default Button</a>
    <a href="#" class="btn btn-primary btn-sm">Small Button</a>
    <a href="#" class="btn btn-primary btn-xs">Extra Small</a>

#### Button State

Disabled Button Active Button
Block Button

    <a href="#" class="btn btn-default disabled">Disabled Button</a>
    <a href="#" class="btn btn-default active">Active Button</a>
    <a href="#" class="btn btn-primary btn-block">Block Button</a>

#### Button with Icon

Twitter Bootstrap Version 4.0

Comment Setting

Button block with icon

    <a href="#" class="btn btn-lg btn-primary">
      <span class="d-flex align-items-center text-left">
        <i class="fab fa-twitter fa-3x mr-3 text-black"></i>
        <span>
          <span class="d-block mb-n1"><b>Twitter Bootstrap</b></span>
          <span class="f-s-12 f-w-600 text-white-transparent-7">Version 4.0</span>
        </span>
      </span>
    </a>

#### Button Group Vertical & Justified

    <div class="btn-group">
      <button class="btn btn-white">Left</button>
      <button class="btn btn-white active">Middle</button>
      <button class="btn btn-white">Right</button>
    </div>

#### Button Toolbars

Left Middle Right

    <div class="btn-group">
      <button class="btn btn-purple">Button</button>
      <button class="btn btn-purple active">Button</button>
      <button class="btn btn-purple">Button</button>
    </div>

    <div class="btn-group btn-group-justified">
      <a class="btn btn-default">Left</a>
      <a class="btn btn-default active">Middle</a>
      <a class="btn btn-default">Right</a>
    </div>

#### Button Icon & Sizes

    <a href="#" class="btn btn-default btn-icon btn-circle btn-lg">
      <i class="fa fa-expand"></i>
    </a>
    <a href="#" class="btn btn-default btn-icon btn-circle">
      <i class="fa fa-expand"></i>
    </a>
    <a href="#" class="btn btn-default btn-icon btn-circle btn-sm">
      <i class="fa fa-expand"></i>
    </a>
    <a href="#" class="btn btn-default btn-icon btn-circle btn-xs">
      <i class="fa fa-expand"></i>
    </a>

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