{% extends 'base.html' %} {% load static %} {% block title %}Predefined CSS Class{% endblock %} {% block js %} {% endblock %} {% block content %}
  1. Home
  2. CSS Helper
  3. Predefined CSS Class

Predefined CSS Class header small text goes here...

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
.mw-75
.mw-50
.mw-25
.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
.mh-75
.mh-50
.mh-25
.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
Background Utilities
.bg-blur-1
.bg-blur-2
.bg-blur-3
.bg-gradient-to-r
.bg-gradient-to-l
.bg-gradient-to-t
.bg-gradient-to-b
.bg-gradient-135
.bg-gradient-to-tl
.bg-gradient-to-tr
.bg-gradient-to-bl
.bg-gradient-to-br
.bg-gradient-to-radial
.bg-gradient-to-conic
.bg-gradient-to-45
.bg-gradient-135
.bg-gradient-from-{any bootstrap color}
.bg-gradient-to-{any bootstrap color}
.bg-blur-3

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-gradient
.bg-gradient-to-r .bg-gradient-from-teal .bg-gradient-to-blue


.text-theme
.text-theme-color
{% endblock %}