Color Admin | Predefined CSS Class

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

Display

Overflow

.row.gx-1

.row.gx-2

.row.gx-3

.row.gx-4

.row.gx-5

.align-baseline

.align-top

.align-middle

.align-bottom

.align-text-top

.align-text-bottom

.table-thead-sticky

.table-tfoot-sticky

.table-thead-bordered

.table-tbody-bordered

.table-tfoot-bordered

.table-px-{1-20}px

.table-py-{1-20}px

.float-start

.float-end

.float-none

.rounded-0

.rounded-1

.rounded-2

.rounded-3

.rounded-top

.rounded-end

.rounded-bottom

.rounded-start

.rounded-circle

.rounded-pill

.d-none

.d-inline

.d-inline-block

.d-block

.d-grid

.d-table

.d-table-cell

.d-table-row

.d-flex

.d-inline-flex

.overflow-auto

.overflow-hidden

.overflow-visible

.overflow-scroll

Flex

Borders

Position

Interactions

Shadows

Visibility

.flex-row

.flex-row-reverse

.flex-column

.flex-column-reverse

.justify-content-start

.justify-content-end

.justify-content-center

.justify-content-between

.justify-content-around

.justify-content-evenly

.align-items-start

.align-items-end

.align-items-center

.align-items-baseline

.align-items-stretch

.align-self-start

.align-self-end

.align-self-center

.align-self-baseline

.align-self-stretch

.flex-grow-1

.flex-grow-0

.flex-shrink-1

.flex-shrink-0

.flex-nowrap

.flex-wrap

.flex-wrap-reverse

.order-{1|2|3|4|5}

.border

.border-top

.border-end

.border-bottom

.border-start

.border-0

.border-top-0

.border-end-0

.border-bottom-0

.border-start-0

.border-1

.border-2

.border-3

.border-4

.border-5

.border-primary

.border-secondary

.border-success

.border-danger

.border-warning

.border-info

.border-light

.border-dark

.border-theme

.border-white

.position-static

.position-relative

.position-absolute

.position-fixed

.position-sticky

.top-0

.top-50

.top-100

.end-0

.end-50

.end-100

.bottom-0

.bottom-50

.bottom-100

.start-0

.start-50

.start-100

.translate-middle

.translate-middle-x

.translate-middle-y

.user-select-all

.user-select-auto

.user-select-none

.pe-none

.pe-auto

.shadow-none

.shadow-sm

.shadow

.shadow-lg

.d-inline-flex

.visible

.invisible

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

.w-100

.w-75

.w-50

.w-25

.w-auto

.vw-100

.min-vw-100

.w-5px

.w-10px

.w-15px

.w-20px

.w-25px

.w-30px

.w-35px

.w-40px

.w-45px

.w-50px

.w-100px

.w-150px

.w-200px

.w-250px

.w-300px

.w-350px

.w-400px

.w-450px

.w-500px

.w-550px

.w-600px

.h-100

.h-75

.h-50

.h-25

.h-auto

.vh-100

.min-vh-100

.h-5px

.h-10px

.h-15px

.h-20px

.h-25px

.h-30px

.h-35px

.h-40px

.h-45px

.h-50px

.h-100px

.h-150px

.h-200px

.h-250px

.h-300px

.h-350px

.h-400px

.h-450px

.h-500px

.h-550px

.h-600px

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

.fs-1

.fs-2

.fs-3

.fs-4

.fs-5

.fs-6

.fs-{1px, 2px... to 80px}

.fw-bold

.fw-bolder

.fw-normal

.fw-light

.fw-lighter

.fw-{100 to 800}

.text-center

.text-start

.text-end

.text-wrap

.text-nowrap

.text-ellipsis

Line Height

Italics

Text decoration

Reset Color

.lh-1

.lh-sm

.lh-base

.lh-lg

.fst-italic

.fst-normal

.text-decoration-underline

.text-decoration-line-through

.text-decoration-none

.reset-link

Text Transform

Word Break

Monospace

.text-lowercase

.text-uppercase

.text-capitalize

.text-break

.font-monospace

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

.m-{1px, 2px... to 10px}

.m-{15px, 20px... to 50px}

.mt-0

.mt-1

.mt-2

.mt-3

.mt-4

.mt-5

.mt-auto

.mt-{1px, 2px... to 10px}

.mt-{15px, 20px... to 50px}

.me-0

.me-1

.me-2

.me-3

.me-4

.me-5

.me-auto

.me-{1px, 2px... to 10px}

.me-{15px, 20px... to 50px}

.mb-0

.mb-1

.mb-2

.mb-3

.mb-4

.mb-5

.mb-auto

.mb-{1px, 2px... to 10px}

.mb-{15px, 20px... to 50px}

.ms-0

.ms-1

.ms-2

.ms-3

.ms-4

.ms-5

.ms-auto

.ms-{1px, 2px... to 10px}

.ms-{15px, 20px... to 50px}

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

.p-{1px, 2px... to 10px}

.p-{15px, 20px... to 50px}

.pt-0

.pt-1

.pt-2

.pt-3

.pt-4

.pt-5

.pt-auto

.pt-{1px, 2px... to 10px}

.pt-{15px, 20px... to 50px}

.pe-0

.pe-1

.pe-2

.pe-3

.pe-4

.pe-5

.pe-auto

.pe-{1px, 2px... to 10px}

.pe-{15px, 20px... to 50px}

.pb-0

.pb-1

.pb-2

.pb-3

.pb-4

.pb-5

.pb-auto

.pb-{1px, 2px... to 10px}

.pb-{15px, 20px... to 50px}

.ps-0

.ps-1

.ps-2

.ps-3

.ps-4

.ps-5

.ps-auto

.ps-{1px, 2px... to 10px}

.ps-{15px, 20px... to 50px}

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

Indigo

Purple

Aqua

Teal

.bg-blue-100

.bg-blue-200

.bg-blue-300

.bg-blue-400

.bg-blue-500 / .bg-blue

.bg-blue-600

.bg-blue-700

.bg-blue-800

.bg-blue-900

.bg-gradient-blue

.bg-indigo-100

.bg-indigo-200

.bg-indigo-300

.bg-indigo-400

.bg-indigo-500 / .bg-indigo

.bg-indigo-600

.bg-indigo-700

.bg-indigo-800

.bg-indigo-900

.bg-gradient-indigo

.bg-purple-100

.bg-purple-200

.bg-purple-300

.bg-purple-400

.bg-purple-500 / .bg-purple

.bg-purple-600

.bg-purple-700

.bg-purple-800

.bg-purple-900

.bg-gradient-purple

.bg-cyan-100

.bg-cyan-200

.bg-cyan-300

.bg-cyan-400

.bg-cyan-500 / .bg-cyan

.bg-cyan-600

.bg-cyan-700

.bg-cyan-800

.bg-cyan-900

.bg-gradient-cyan

.bg-teal-100

.bg-teal-200

.bg-teal-300

.bg-teal-400

.bg-teal-500 / .bg-teal

.bg-teal-600

.bg-teal-700

.bg-teal-800

.bg-teal-900

.bg-gradient-teal

Green

Lime

Orange

Yellow

Red

.bg-green-100

.bg-green-200

.bg-green-300

.bg-green-400

.bg-green-500 / .bg-green

.bg-green-600

.bg-green-700

.bg-green-800

.bg-green-900

.bg-gradient-green

.bg-lime-100

.bg-lime-200

.bg-lime-300

.bg-lime-400

.bg-lime-500 / .bg-lime

.bg-lime-600

.bg-lime-700

.bg-lime-800

.bg-lime-900

.bg-gradient-lime

.bg-orange-100

.bg-orange-200

.bg-orange-300

.bg-orange-400

.bg-orange-500 / .bg-orange

.bg-orange-600

.bg-orange-700

.bg-orange-800

.bg-orange-900

.bg-gradient-orange

.bg-yellow-100

.bg-yellow-200

.bg-yellow-300

.bg-yellow-400

.bg-yellow-500 / .bg-yellow

.bg-yellow-600

.bg-yellow-700

.bg-yellow-800

.bg-yellow-900

.bg-gradient-yellow

.bg-red-100

.bg-red-200

.bg-red-300

.bg-red-400

.bg-red-500 / .bg-red

.bg-red-600

.bg-red-700

.bg-red-800

.bg-red-900

.bg-gradient-red

Pink

Black

Grey

Silver

White

.bg-pink-100

.bg-pink-200

.bg-pink-300

.bg-pink-400

.bg-pink-500 / .bg-pink

.bg-pink-600

.bg-pink-700

.bg-pink-800

.bg-pink-900

.bg-gradient-pink

.bg-black-100

.bg-black-200

.bg-black-300

.bg-black-400

.bg-black-500 / .bg-black

.bg-black-600

.bg-black-700

.bg-black-800

.bg-black-900

.bg-gradient-black

.bg-gray-100

.bg-gray-200

.bg-gray-300

.bg-gray-400

.bg-gray-500 / .bg-gray

.bg-gray-600

.bg-gray-700

.bg-gray-800

.bg-gray-900

.bg-gradient-gray

.bg-silver-100

.bg-silver-200

.bg-silver-300

.bg-silver-400

.bg-silver-500 / .bg-silver

.bg-silver-600

.bg-silver-700

.bg-silver-800

.bg-silver-900

.bg-gradient-silver

.bg-white-100

.bg-white-200

.bg-white-300

.bg-white-400

.bg-white-500 / .bg-white

.bg-white-600

.bg-white-700

.bg-white-800

.bg-white-900

.bg-gradient-white

Extra

Custom Background

.bg-none

.bg-transparent

.bg-theme

.bg-gradient-red-pink

.bg-gradient-orange-red

.bg-gradient-yellow-orange

.bg-gradient-yellow-red

.bg-gradient-teal-green

.bg-gradient-yellow-green

.bg-gradient-blue-purple

.bg-gradient-cyan-blue

.bg-gradient-cyan-purple

.bg-gradient-cyan-indigo

.bg-gradient-blue-indigo

.bg-gradient-purple-indigo

.bg-gradient-silver-black

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

Indigo

Purple

Aqua

Teal

.text-blue-100

.text-blue-200

.text-blue-300

.text-blue-400

.text-blue-500 / .text-blue

.text-blue-600

.text-blue-700

.text-blue-800

.text-blue-900

.text-indigo-100

.text-indigo-200

.text-indigo-300

.text-indigo-400

.text-indigo-500 / .text-indigo

.text-indigo-600

.text-indigo-700

.text-indigo-800

.text-indigo-900

.text-purple-100

.text-purple-200

.text-purple-300

.text-purple-400

.text-purple-500 / .text-purple

.text-purple-600

.text-purple-700

.text-purple-800

.text-purple-900

.text-cyan-100

.text-cyan-200

.text-cyan-300

.text-cyan-400

.text-cyan-500 / .text-cyan

.text-cyan-600

.text-cyan-700

.text-cyan-800

.text-cyan-900

.text-teal-100

.text-teal-200

.text-teal-300

.text-teal-400

.text-teal-500 / .text-teal

.text-teal-600

.text-teal-700

.text-teal-800

.text-teal-900

Green

Lime

Orange

Yellow

Red

.text-green-100

.text-green-200

.text-green-300

.text-green-400

.text-green-500 / .text-green

.text-green-600

.text-green-700

.text-green-800

.text-green-900

.text-lime-100

.text-lime-200

.text-lime-300

.text-lime-400

.text-lime-500 / .text-lime

.text-lime-600

.text-lime-700

.text-lime-800

.text-lime-900

.text-orange-100

.text-orange-200

.text-orange-300

.text-orange-400

.text-orange-500 / .text-orange

.text-orange-600

.text-orange-700

.text-orange-800

.text-orange-900

.text-yellow-100

.text-yellow-200

.text-yellow-300

.text-yellow-400

.text-yellow-500 / .text-yellow

.text-yellow-600

.text-yellow-700

.text-yellow-800

.text-yellow-900

.text-red-100

.text-red-200

.text-red-300

.text-red-400

.text-red-500 / .text-red

.text-red-600

.text-red-700

.text-red-800

.text-red-900

Pink

Black

Grey

Silver

White

.text-pink-100

.text-pink-200

.text-pink-300

.text-pink-400

.text-pink-500 / .text-pink

.text-pink-600

.text-pink-700

.text-pink-800

.text-pink-900

.text-black-100

.text-black-200

.text-black-300

.text-black-400

.text-black-500 / .text-black

.text-black-600

.text-black-700

.text-black-800

.text-black-900

.text-gray-100

.text-gray-200

.text-gray-300

.text-gray-400

.text-gray-500 / .text-gray

.text-gray-600

.text-gray-700

.text-gray-800

.text-gray-900

.text-silver-100

.text-silver-200

.text-silver-300

.text-silver-400

.text-silver-500 / .text-silver

.text-silver-600

.text-silver-700

.text-silver-800

.text-silver-900

.text-white-100

.text-white-200

.text-white-300

.text-white-400

.text-white-500 / .text-white

.text-white-600

.text-white-700

.text-white-800

.text-white-900

Extra

Theme

.text-gradient
.bg-gradient-*

.text-theme
.text-theme-color

Predefined CSS Class header small text goes here...

General CSS Class

Width & Height CSS Class

Text & Font CSS Class

Margin CSS Class

Padding CSS Class

Background CSS Class

Text Color CSS Class

App Settings

Admin Design (5)

Language Version (7)

Frontend Design (5)

Server Error Reports

John Smith

Olivia

New User Registered

New Email From John

Predefined CSS Class header small text goes here...

General CSS Class

Width & Height CSS Class

Text & Font CSS Class

Margin CSS Class

Padding CSS Class

Background CSS Class

Text Color CSS Class

App Settings

Admin Design (5)

Language Version (7)

Frontend Design (5)