@extends('layouts.default')
@section('title', 'Predefined CSS Class')
@section('content')
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.
Row Space |
Table |
Float |
Border Radius |
Vertical Box |
Overflow |
.row.row-space-0 |
.row.row-space-2 |
.row.row-space-4 |
.row.row-space-6 |
.row.row-space-8 |
.row.row-space-10 |
.row.row-space-12 |
.row.row-space-14 |
.row.row-space-16 |
.row.row-space-18 |
.row.row-space-20 |
.row.row-space-22 |
.row.row-space-24 |
.row.row-space-26 |
.row.row-space-28 |
.row.row-space-30 |
|
.valign-top |
.valign-middle |
.valign-bottom |
.table-valign-top |
.table-valign-middle |
.table-valign-bottom |
.table-th-valign-top |
.table-td-valign-top |
.table-th-valign-middle |
.table-td-valign-middle |
.table-th-valign-bottom |
.table-td-valign-bottom |
|
.pull-left |
.pull-right |
.pull-none |
|
.no-rounded-corner |
.rounded-corner |
|
.vertical-box |
.vertical-box-column |
.vertical-box-row |
.vertical-box-cell |
.vertical-box-inner-cell |
|
.overflow-auto |
.overflow-visible |
.overflow-scroll |
.overflow-x-hidden |
.overflow-x-visible |
.overflow-x-scroll |
.overflow-y-hidden |
.overflow-y-visible |
.overflow-y-scroll |
|
Width & Height 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.
Width |
Height |
.width-full (100%) |
.width-lg (600px) |
.width-md (450px) |
.width-sm (300px) |
.width-xs (150px) |
.width-600 |
.width-550 |
.width-500 |
.width-450 |
.width-400 |
.width-350 |
.width-300 |
.width-250 |
|
.width-200 |
.width-150 |
.width-100 |
.width-90 |
.width-80 |
.width-70 |
.width-60 |
.width-50 |
.width-40 |
.width-30 |
.width-20 |
.width-10 |
.width-0 |
|
.height-full (100%) |
.height-lg (600px) |
.height-md (450px) |
.height-sm (300px) |
.height-xs (150px) |
.height-600 |
.height-550 |
.height-500 |
.height-450 |
.height-400 |
.height-350 |
.height-300 |
.height-250 |
|
.height-200 |
.height-150 |
.height-100 |
.height-90 |
.height-80 |
.height-70 |
.height-60 |
.height-50 |
.height-40 |
.height-30 |
.height-20 |
.height-10 |
.height-0 |
|
Text & Font 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.
Font Size |
Font Weight |
Text Align |
Text Overflow |
.f-s-8 |
.f-s-9 |
.f-s-10 |
.f-s-11 |
.f-s-12 |
.f-s-13 |
.f-s-14 |
.f-s-15 |
.f-s-16 |
.f-s-17 |
.f-s-18 |
.f-s-19 |
.f-s-20 |
|
.f-w-100 |
.f-w-200 |
.f-w-300 |
.f-w-400 |
.f-w-500 |
.f-w-600 |
.f-w-700 |
|
.text-center |
.text-left |
.text-right |
|
.text-nowrap |
.text-ellipsis |
|
Margin 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.
Margin |
Margin Top |
Margin Right |
Margin Bottom |
Margin Left |
.m-0 |
.m-1 |
.m-2 |
.m-3 |
.m-4 |
.m-5 |
.m-10 |
.m-15 |
.m-20 |
.m-25 |
.m-30 |
.m-35 |
.m-40 |
.m-auto |
|
.m-t-0 |
.m-t-1 |
.m-t-2 |
.m-t-3 |
.m-t-4 |
.m-t-5 |
.m-t-10 |
.m-t-15 |
.m-t-20 |
.m-t-25 |
.m-t-30 |
.m-t-35 |
.m-t-40 |
|
.m-r-0 |
.m-r-1 |
.m-r-2 |
.m-r-3 |
.m-r-4 |
.m-r-5 |
.m-r-10 |
.m-r-15 |
.m-r-20 |
.m-r-25 |
.m-r-30 |
.m-r-35 |
.m-r-40 |
|
.m-b-0 |
.m-b-1 |
.m-b-2 |
.m-b-3 |
.m-b-4 |
.m-b-5 |
.m-b-10 |
.m-b-15 |
.m-b-20 |
.m-b-25 |
.m-b-30 |
.m-b-35 |
.m-b-40 |
|
.m-l-0 |
.m-l-1 |
.m-l-2 |
.m-l-3 |
.m-l-4 |
.m-l-5 |
.m-l-10 |
.m-l-15 |
.m-l-20 |
.m-l-25 |
.m-l-30 |
.m-l-35 |
.m-l-40 |
|
Padding 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.
Padding |
Padding Top |
Padding Right |
Padding Bottom |
Padding Left |
.p-0 |
.p-1 |
.p-2 |
.p-3 |
.p-4 |
.p-5 |
.p-10 |
.p-15 / .wrapper |
.p-20 |
.p-25 |
.p-30 |
.p-35 |
.p-40 |
.p-auto |
|
.p-t-0 |
.p-t-1 |
.p-t-2 |
.p-t-3 |
.p-t-4 |
.p-t-5 |
.p-t-10 |
.p-t-15 |
.p-t-20 |
.p-t-25 |
.p-t-30 |
.p-t-35 |
.p-t-40 |
|
.p-r-0 |
.p-r-1 |
.p-r-2 |
.p-r-3 |
.p-r-4 |
.p-r-5 |
.p-r-10 |
.p-r-15 |
.p-r-20 |
.p-r-25 |
.p-r-30 |
.p-r-35 |
.p-r-40 |
|
.p-b-0 |
.p-b-1 |
.p-b-2 |
.p-b-3 |
.p-b-4 |
.p-b-5 |
.p-b-10 |
.p-b-15 |
.p-b-20 |
.p-b-25 |
.p-b-30 |
.p-b-35 |
.p-b-40 |
|
.p-l-0 |
.p-l-1 |
.p-l-2 |
.p-l-3 |
.p-l-4 |
.p-l-5 |
.p-l-10 |
.p-l-15 |
.p-l-20 |
.p-l-25 |
.p-l-30 |
.p-l-35 |
.p-l-40 |
|
Background 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.
Blue |
Purple |
Aqua |
Green |
Lime |
.bg-blue-lighter |
.bg-blue / .bg-primary |
.bg-blue-darker |
.bg-blue-transparent-9 |
.bg-blue-transparent-8 |
.bg-blue-transparent-7 |
.bg-blue-transparent-6 |
.bg-blue-transparent-5 |
.bg-blue-transparent-4 |
.bg-blue-transparent-3 |
.bg-blue-transparent-2 |
.bg-blue-transparent-1 |
.bg-gradient-blue |
|
.bg-purple-lighter |
.bg-purple |
.bg-purple-darker |
.bg-purple-transparent-9 |
.bg-purple-transparent-8 |
.bg-purple-transparent-7 |
.bg-purple-transparent-6 |
.bg-purple-transparent-5 |
.bg-purple-transparent-4 |
.bg-purple-transparent-3 |
.bg-purple-transparent-2 |
.bg-purple-transparent-1 |
.bg-gradient-purple |
|
.bg-aqua-lighter |
.bg-aqua / .bg-info |
.bg-aqua-darker |
.bg-aqua-transparent-9 |
.bg-aqua-transparent-8 |
.bg-aqua-transparent-7 |
.bg-aqua-transparent-6 |
.bg-aqua-transparent-5 |
.bg-aqua-transparent-4 |
.bg-aqua-transparent-3 |
.bg-aqua-transparent-2 |
.bg-aqua-transparent-1 |
.bg-gradient-aqua |
|
.bg-green-lighter |
.bg-green / .bg-success |
.bg-green-darker |
.bg-green-transparent-9 |
.bg-green-transparent-8 |
.bg-green-transparent-7 |
.bg-green-transparent-6 |
.bg-green-transparent-5 |
.bg-green-transparent-4 |
.bg-green-transparent-3 |
.bg-green-transparent-2 |
.bg-green-transparent-1 |
.bg-gradient-green |
|
.bg-lime-lighter |
.bg-lime |
.bg-lime-darker |
.bg-lime-transparent-9 |
.bg-lime-transparent-8 |
.bg-lime-transparent-7 |
.bg-lime-transparent-6 |
.bg-lime-transparent-5 |
.bg-lime-transparent-4 |
.bg-lime-transparent-3 |
.bg-lime-transparent-2 |
.bg-lime-transparent-1 |
.bg-gradient-lime |
|
Orange |
Yellow |
Red |
Black |
Grey |
.bg-orange-lighter |
.bg-orange / .bg-warning |
.bg-orange-darker |
.bg-orange-transparent-9 |
.bg-orange-transparent-8 |
.bg-orange-transparent-7 |
.bg-orange-transparent-6 |
.bg-orange-transparent-5 |
.bg-orange-transparent-4 |
.bg-orange-transparent-3 |
.bg-orange-transparent-2 |
.bg-orange-transparent-1 |
.bg-gradient-orange |
|
.bg-yellow-lighter |
.bg-yellow |
.bg-yellow-darker |
.bg-yellow-transparent-9 |
.bg-yellow-transparent-8 |
.bg-yellow-transparent-7 |
.bg-yellow-transparent-6 |
.bg-yellow-transparent-5 |
.bg-yellow-transparent-4 |
.bg-yellow-transparent-3 |
.bg-yellow-transparent-2 |
.bg-yellow-transparent-1 |
.bg-gradient-yellow |
|
.bg-red-lighter |
.bg-red / .bg-danger |
.bg-red-darker |
.bg-red-transparent-9 |
.bg-red-transparent-8 |
.bg-red-transparent-7 |
.bg-red-transparent-6 |
.bg-red-transparent-5 |
.bg-red-transparent-4 |
.bg-red-transparent-3 |
.bg-red-transparent-2 |
.bg-red-transparent-1 |
.bg-gradient-red |
|
.bg-black-lighter |
.bg-black / .bg-inverse |
.bg-black-darker |
.bg-black-transparent-9 |
.bg-black-transparent-8 |
.bg-black-transparent-7 |
.bg-black-transparent-6 |
.bg-black-transparent-5 |
.bg-black-transparent-4 |
.bg-black-transparent-3 |
.bg-black-transparent-2 |
.bg-black-transparent-1 |
.bg-gradient-black |
|
.bg-grey-lighter |
.bg-grey |
.bg-grey-darker |
.bg-grey-transparent-9 |
.bg-grey-transparent-8 |
.bg-grey-transparent-7 |
.bg-grey-transparent-6 |
.bg-grey-transparent-5 |
.bg-grey-transparent-4 |
.bg-grey-transparent-3 |
.bg-grey-transparent-2 |
.bg-grey-transparent-1 |
.bg-gradient-grey |
|
Silver |
White |
Extra |
.bg-silver-lighter |
.bg-silver |
.bg-silver-darker |
.bg-silver-transparent-9 |
.bg-silver-transparent-8 |
.bg-silver-transparent-7 |
.bg-silver-transparent-6 |
.bg-silver-transparent-5 |
.bg-silver-transparent-4 |
.bg-silver-transparent-3 |
.bg-silver-transparent-2 |
.bg-silver-transparent-1 |
.bg-gradient-silver |
|
.bg-white |
.bg-white-transparent-9 |
.bg-white-transparent-8 |
.bg-white-transparent-7 |
.bg-white-transparent-6 |
.bg-white-transparent-5 |
.bg-white-transparent-4 |
.bg-white-transparent-3 |
.bg-white-transparent-2 |
.bg-white-transparent-1 |
|
|
Text Color 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.
Blue |
Purple |
Aqua |
Green |
Lime |
.text-blue-lighter |
.text-blue / .text-primary |
.text-blue-darker |
.text-blue-transparent-9 |
.text-blue-transparent-8 |
.text-blue-transparent-7 |
.text-blue-transparent-6 |
.text-blue-transparent-5 |
.text-blue-transparent-4 |
.text-blue-transparent-3 |
.text-blue-transparent-2 |
.text-blue-transparent-1 |
|
.text-purple-lighter |
.text-purple |
.text-purple-darker |
.text-purple-transparent-9 |
.text-purple-transparent-8 |
.text-purple-transparent-7 |
.text-purple-transparent-6 |
.text-purple-transparent-5 |
.text-purple-transparent-4 |
.text-purple-transparent-3 |
.text-purple-transparent-2 |
.text-purple-transparent-1 |
|
.text-aqua-lighter |
.text-aqua / .text-info |
.text-aqua-darker |
.text-aqua-transparent-9 |
.text-aqua-transparent-8 |
.text-aqua-transparent-7 |
.text-aqua-transparent-6 |
.text-aqua-transparent-5 |
.text-aqua-transparent-4 |
.text-aqua-transparent-3 |
.text-aqua-transparent-2 |
.text-aqua-transparent-1 |
|
.text-green-lighter |
.text-green / .text-success |
.text-green-darker |
.text-green-transparent-9 |
.text-green-transparent-8 |
.text-green-transparent-7 |
.text-green-transparent-6 |
.text-green-transparent-5 |
.text-green-transparent-4 |
.text-green-transparent-3 |
.text-green-transparent-2 |
.text-green-transparent-1 |
|
.text-lime-lighter |
.text-lime |
.text-lime-darker |
.text-lime-transparent-9 |
.text-lime-transparent-8 |
.text-lime-transparent-7 |
.text-lime-transparent-6 |
.text-lime-transparent-5 |
.text-lime-transparent-4 |
.text-lime-transparent-3 |
.text-lime-transparent-2 |
.text-lime-transparent-1 |
|
Orange |
Yellow |
Red |
Black |
Grey |
.text-orange-lighter |
.text-orange / .text-warning |
.text-orange-darker |
.text-orange-transparent-9 |
.text-orange-transparent-8 |
.text-orange-transparent-7 |
.text-orange-transparent-6 |
.text-orange-transparent-5 |
.text-orange-transparent-4 |
.text-orange-transparent-3 |
.text-orange-transparent-2 |
.text-orange-transparent-1 |
|
.text-yellow-lighter |
.text-yellow |
.text-yellow-darker |
.text-yellow-transparent-9 |
.text-yellow-transparent-8 |
.text-yellow-transparent-7 |
.text-yellow-transparent-6 |
.text-yellow-transparent-5 |
.text-yellow-transparent-4 |
.text-yellow-transparent-3 |
.text-yellow-transparent-2 |
.text-yellow-transparent-1 |
|
.text-red-lighter |
.text-red |
.text-red-darker |
.text-red-transparent-9 |
.text-red-transparent-8 |
.text-red-transparent-7 |
.text-red-transparent-6 |
.text-red-transparent-5 |
.text-red-transparent-4 |
.text-red-transparent-3 |
.text-red-transparent-2 |
.text-red-transparent-1 |
|
.text-black-lighter |
.text-black / .text-inverse |
.text-black-darker |
.text-black-transparent-9 |
.text-black-transparent-8 |
.text-black-transparent-7 |
.text-black-transparent-6 |
.text-black-transparent-5 |
.text-black-transparent-4 |
.text-black-transparent-3 |
.text-black-transparent-2 |
.text-black-transparent-1 |
|
.text-grey-lighter |
.text-grey |
.text-grey-darker |
.text-grey-transparent-9 |
.text-grey-transparent-8 |
.text-grey-transparent-7 |
.text-grey-transparent-6 |
.text-grey-transparent-5 |
.text-grey-transparent-4 |
.text-grey-transparent-3 |
.text-grey-transparent-2 |
.text-grey-transparent-1 |
|
Silver |
White |
Extra |
.text-silver-lighter |
.text-silver / .text-muted |
.text-silver-darker |
.text-silver-transparent-9 |
.text-silver-transparent-8 |
.text-silver-transparent-7 |
.text-silver-transparent-6 |
.text-silver-transparent-5 |
.text-silver-transparent-4 |
.text-silver-transparent-3 |
.text-silver-transparent-2 |
.text-silver-transparent-1 |
|
.text-white |
.text-white-transparent-9 |
.text-white-transparent-8 |
.text-white-transparent-7 |
.text-white-transparent-6 |
.text-white-transparent-5 |
.text-white-transparent-4 |
.text-white-transparent-3 |
.text-white-transparent-2 |
.text-white-transparent-1 |
|
.text-gradient
.bg-gradient-*
|
|
@endsection