Color Admin | Predefined CSS Class

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

- Navigation
- Dashboard
  - Dashboard v1
  - Dashboard v2
- 10 Email
  - Inbox v1
  - Inbox v2
  - Compose
  - Detail
- UI Elements NEW
  - General
  - Typography
  - Tabs & Accordions
  - Modal & Notification
  - Widget Boxes
  - Media Object
  - Buttons
  - Icons
  - Simple Line Icons
  - Ionicons
- Form Stuff
  - Form Elements
  - Form Plugins
  - Form Slider + Switcher
  - Form Validation
  - Wizards
  - Wizards + Validation
  - WYSIWYG
  - X-Editable
  - Multiple File Upload
- Tables NEW
  - Basic Tables
  - Managed Tables
    - Default
    - Autofill
    - ColReorder
    - ColVis
    - Fixed Column
    - Fixed Header
    - KeyTable
    - Responsive
    - Scroller
    - TableTools
- Front End
  - One Page Parallax
- Email Template
  - System Template
  - Newsletter Template
- Chart
  - Flot Chart
  - Morris Chart
- Calendar
- Map
  - Vector Map
  - Google Map
- Gallery
  - Gallery v1
  - Gallery v2
- Page Options NEW
  - 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
- Extra
  - Timeline
  - Coming Soon Page
  - Search Results
  - Invoice
  - 404 Error Page
- Login
  - Login
  - Login v2
- Version NEW
  - HTML
  - AJAX
- 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. CSS Helper
3. Predefined CSS Class

# Predefined CSS Class header small text goes here...

- General
- Text & Font
- Margin
- Padding
- Background

#### General CSS Class

All the predefined css classes will override the defined css styling in your classes, UNLESS the `!important` is declared in your defined css styling.

General CSS Class Name
Row Space | Table | Float | Border Radius | Width | Height | Vertical Box | Overflow
--- | --- | --- | --- | --- | --- | --- | ---
.row.row-space-0 | .table-valign-middle | .pull-left | .no-rounded-corner | .width-full (100%) | .height-full (100%) | .vertical-box | .overflow-auto
.row.row-space-2 | .table-th-valign-middle | .pull-right | .rounded-corner | .width-lg (600px) | .height-lg (600px) | .vertical-box-column | .overflow-visible
.row.row-space-4 | .table-td-valign-middle | .pull-none |  | .width-md (450px) | .height-md (450px) | .vertical-box-row | .overflow-scroll
.row.row-space-6 | .table-valign-top |  |  | .width-sm (300px) | .height-sm (300px) | .vertical-box-cell | .overflow-x-hidden
.row.row-space-8 | .table-th-valign-top |  |  | .width-xs (150px) | .height-xs (150px) | .vertical-box-inner-cell | .overflow-x-visible
.row.row-space-10 | .table-td-valign-top |  |  | .width-50 (50px) | .height-50 (50px) |  | .overflow-x-scroll
.row.row-space-12 | .table-valign-bottom |  |  | .width-100 (100px) | .height-100 (100px) |  | .overflow-y-hidden
.row.row-space-14 | .table-th-valign-bottom |  |  | .width-150 (150px) | .height-150 (150px) |  | .overflow-y-visible
.row.row-space-16 | .table-td-valign-bottom |  |  | .width-200 (200px) | .height-200 (200px) |  | .overflow-y-scroll
.row.row-space-18 |  |  |  | .width-250 (250px) | .height-250 (250px) |  |
.row.row-space-20 |  |  |  | .width-300 (300px) | .height-300 (300px) |  |
.row.row-space-22 |  |  |  | .width-350 (350px) | .height-350 (350px) |  |
.row.row-space-24 |  |  |  | .width-400 (400px) | .height-400 (400px) |  |
.row.row-space-26 |  |  |  | .width-450 (450px) | .height-450 (450px) |  |
.row.row-space-28 |  |  |  | .width-500 (500px) | .height-500 (500px) |  |
.row.row-space-30 |  |  |  | .width-550 (550px) | .height-550 (550px) |  |
|  |  |  | .width-600 (600px) | .height-600 (600px) |  |

#### Text & Font - Align / Color / Size

All the predefined css classes will override the defined css styling in your classes, UNLESS the `!important` is declared in your defined css styling.

Text / Font Class Name
Font Size | Font Weight | Text Color | Text Align | Text Overflow
--- | --- | --- | --- | ---
.f-s-8 | .f-w-100 | .text-inverse | .text-center | .text-ellipsis
.f-s-9 | .f-w-200 | .text-primary | .text-left |
.f-s-10 | .f-w-300 | .text-success | .text-right |
.f-s-11 | .f-w-400 | .text-danger |  |
.f-s-12 | .f-w-500 | .text-info |  |
.f-s-13 | .f-w-600 | .text-warning |  |
.f-s-14 | .f-w-700 | .text-white |  |
.f-s-15 |  |  |  |
.f-s-16 |  |  |  |
.f-s-17 |  |  |  |
.f-s-18 |  |  |  |
.f-s-19 |  |  |  |
.f-s-20 |  |  |  |

#### Margin - All / Top / Right / Bottom / Left

All the predefined css classes will override the defined css styling in your classes, UNLESS the `!important` is declared in your defined css styling.

Margin Class Name
Margin | Margin Top | Margin Right | Margin Bottom | Margin Left
--- | --- | --- | --- | ---
.m-0 | .m-t-0 | .m-r-0 | .m-b-0 | .m-l-0
.m-1 | .m-t-1 | .m-r-1 | .m-b-1 | .m-l-1
.m-2 | .m-t-2 | .m-r-2 | .m-b-2 | .m-l-2
.m-3 | .m-t-3 | .m-r-3 | .m-b-3 | .m-l-3
.m-4 | .m-t-4 | .m-r-4 | .m-b-4 | .m-l-4
.m-5 | .m-t-5 | .m-r-5 | .m-b-5 | .m-l-5
.m-10 | .m-t-10 | .m-r-10 | .m-b-10 | .m-l-10
.m-15 | .m-t-15 | .m-r-15 | .m-b-15 | .m-l-15
.m-20 | .m-t-20 | .m-r-20 | .m-b-20 | .m-l-20
.m-25 | .m-t-25 | .m-r-25 | .m-b-25 | .m-l-25
.m-30 | .m-t-30 | .m-r-30 | .m-b-30 | .m-l-30
.m-35 | .m-t-35 | .m-r-35 | .m-b-35 | .m-l-35
.m-40 | .m-t-40 | .m-r-40 | .m-b-40 | .m-l-40
.m-auto |  |  |  |

#### Padding - All / Top / Right / Bottom / Left

All the predefined css classes will override the defined css styling in your classes, UNLESS the `!important` is declared in your defined css styling.

Padding Class Name
Padding | Padding Top | Padding Right | Padding Bottom | Padding Left
--- | --- | --- | --- | ---
.p-0 | .p-t-0 | .p-r-0 | .p-b-0 | .p-l-0
.p-1 | .p-t-1 | .p-r-1 | .p-b-1 | .p-l-1
.p-2 | .p-t-2 | .p-r-2 | .p-b-2 | .p-l-2
.p-3 | .p-t-3 | .p-r-3 | .p-b-3 | .p-l-3
.p-4 | .p-t-4 | .p-r-4 | .p-b-4 | .p-l-4
.p-5 | .p-t-5 | .p-r-5 | .p-b-5 | .p-l-5
.p-10 | .p-t-10 | .p-r-10 | .p-b-10 | .p-l-10
.p-15 / .wrapper | .p-t-15 | .p-r-15 | .p-b-15 | .p-l-15
.p-20 | .p-t-20 | .p-r-20 | .p-b-20 | .p-l-20
.p-25 | .p-t-25 | .p-r-25 | .p-b-25 | .p-l-25
.p-30 | .p-t-30 | .p-r-30 | .p-b-30 | .p-l-30
.p-35 | .p-t-35 | .p-r-35 | .p-b-35 | .p-l-35
.p-40 | .p-t-40 | .p-r-40 | .p-b-40 | .p-l-40

#### Background

All the predefined css classes will override the defined css styling in your classes, UNLESS the `!important` is declared in your defined css styling.

Color Name | Background Class Name
--- | ---
Lighter | Normal | Darker
No Background | - | .no-bg | -
White | - | .bg-white | -
Silver | .bg-silver-lighter | .bg-silver | .bg-silver-darker
Black | .bg-black-lighter | .bg-black | .bg-black-darker
Red | .bg-red-lighter | .bg-red | .bg-red-darker
Orange | .bg-orange-lighter | .bg-orange | .bg-orange-darker
Yellow | .bg-yellow-lighter | .bg-yellow | .bg-yellow-darker
Green | .bg-green-lighter | .bg-green | .bg-green-darker
Blue | .bg-blue-lighter | .bg-blue | .bg-blue-darker
Aqua | .bg-aqua-lighter | .bg-aqua | .bg-aqua-darker
Purple | .bg-purple-lighter | .bg-purple | .bg-purple-darker

##### Color Theme

Header Styling
Header
Sidebar Styling
Sidebar
Sidebar Gradient
Content Styling
Reset Local Storage