Theme Setting

Theme Color
Sidebar Mode
  • light
  • dark
  • gradient
Layout Direction
  • ltr
  • rtl
Layout mode
  • light
  • dark

background color

  • .bg-primary
  • .bg-secondary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-info
  • .bg-danger
  • .bg-light
  • .bg-dark

text color

  • .text-primary
  • .text-secondary
  • .text-success
  • .text-info
  • .text-warning
  • .text-info
  • .text-danger
  • .text-light
  • .text-dark

button

  • .btn.btn-primary
  • .btn.btn-secondary
  • .btn.btn-success
  • .btn.btn-info
  • .btn.btn-warning
  • .btn.btn-info
  • .btn.btn-danger
  • .btn.btn-light
  • .btn.btn-dark

button outline

  • .btn.btn-outline-primary
  • .btn.btn-outline-secondary
  • .btn.btn-outline-success
  • .btn.btn-outline-info
  • .btn.btn-outline-warning
  • .btn.btn-outline-info
  • .btn.btn-outline-danger
  • .btn.btn-outline-light
  • .btn.btn-outline-dark

alert

  • .alert.alert-primary
  • .alert.alert-secondary
  • .alert.alert-success
  • .alert.alert-info
  • .alert.alert-warning
  • .alert.alert-info
  • .alert.alert-danger
  • .alert.alert-light
  • .alert.alert-dark

alert outline

  • .alert.alert-outline-primary
  • .alert.alert-outline-secondary
  • .alert.alert-outline-success
  • .alert.alert-outline-info
  • .alert.alert-outline-warning
  • .alert.alert-outline-info
  • .alert.alert-outline-danger
  • .alert.alert-outline-light
  • .alert.alert-outline-dark

badge

  • .badge.badge-primary
  • .badge.badge-secondary
  • .badge.badge-success
  • .badge.badge-info
  • .badge.badge-warning
  • .badge.badge-info
  • .badge.badge-danger
  • .badge.badge-light
  • .badge.badge-dark

badge rounded

  • .badge.badge-primary.rounded-pill
  • .badge.badge-secondary.rounded-pill
  • .badge.badge-success.rounded-pill
  • .badge.badge-info.rounded-pill
  • .badge.badge-warning.rounded-pill
  • .badge.badge-info.rounded-pill
  • .badge.badge-danger.rounded-pill
  • .badge.badge-light.rounded-pill
  • .badge.badge-dark.rounded-pill

margrin left

  • .ml-5
  • .ml-10
  • .ml-15
  • .ml-20
  • .ml-25
  • .ml-30
  • .ml-35
  • .ml-40
  • .ml-45
  • .ml-50
  • .ml-55
  • .ml-60
  • .ml-65
  • .ml-70
  • .ml-75
  • .ml-80
  • .ml-85
  • .ml-90
  • .ml-95
  • .ml-100

margrin right

  • .mr-5
  • .mr-10
  • .mr-15
  • .mr-20
  • .mr-25
  • .mr-30
  • .mr-35
  • .mr-40
  • .mr-45
  • .mr-50
  • .mr-55
  • .mr-60
  • .mr-65
  • .mr-70
  • .mr-75
  • .mr-80
  • .mr-85
  • .mr-90
  • .mr-95
  • .mr-100

margrin top

  • .mt-5
  • .mt-10
  • .mt-15
  • .mt-20
  • .mt-25
  • .mt-30
  • .mt-35
  • .mt-40
  • .mt-45
  • .mt-50
  • .mt-55
  • .mt-60
  • .mt-65
  • .mt-70
  • .mt-75
  • .mt-80
  • .mt-85
  • .mt-90
  • .mt-95
  • .mt-100

margrin bottom

  • .mb-5
  • .mb-10
  • .mb-15
  • .mb-20
  • .mb-25
  • .mb-30
  • .mb-35
  • .mb-40
  • .mb-45
  • .mb-50
  • .mb-55
  • .mb-60
  • .mb-65
  • .mb-70
  • .mb-75
  • .mb-80
  • .mb-85
  • .mb-90
  • .mb-95
  • .mb-100

margrin verticale

  • .my-5
  • .my-10
  • .my-15
  • .my-20
  • .my-25
  • .my-30
  • .my-35
  • .my-40
  • .my-45
  • .my-50
  • .my-55
  • .my-60
  • .my-65
  • .my-70
  • .my-75
  • .my-80
  • .my-85
  • .my-90
  • .my-95
  • .my-100

margrin horizontal

  • .mx-5
  • .mx-10
  • .mx-15
  • .mx-20
  • .mx-25
  • .mx-30
  • .mx-35
  • .mx-40
  • .mx-45
  • .mx-50
  • .mx-55
  • .mx-60
  • .mx-65
  • .mx-70
  • .mx-75
  • .mx-80
  • .mx-85
  • .mx-90
  • .mx-95
  • .mx-100

padding left

  • .pl-5
  • .pl-10
  • .pl-15
  • .pl-20
  • .pl-25
  • .pl-30
  • .pl-35
  • .pl-40
  • .pl-45
  • .pl-50
  • .pl-55
  • .pl-60
  • .pl-65
  • .pl-70
  • .pl-75
  • .pl-80
  • .pl-85
  • .pl-90
  • .pl-95
  • .pl-100

padding right

  • .pr-5
  • .pr-10
  • .pr-15
  • .pr-20
  • .pr-25
  • .pr-30
  • .pr-35
  • .pr-40
  • .pr-45
  • .pr-50
  • .pr-55
  • .pr-60
  • .pr-65
  • .pr-70
  • .pr-75
  • .pr-80
  • .pr-85
  • .pr-90
  • .pr-95
  • .pr-100

padding top

  • .pt-5
  • .pt-10
  • .pt-15
  • .pt-20
  • .pt-25
  • .pt-30
  • .pt-35
  • .pt-40
  • .pt-45
  • .pt-50
  • .pt-55
  • .pt-60
  • .pt-65
  • .pt-70
  • .pt-75
  • .pt-80
  • .pt-85
  • .pt-90
  • .pt-95
  • .pt-100

padding bottom

  • .pb-5
  • .pb-10
  • .pb-15
  • .pb-20
  • .pb-25
  • .pb-30
  • .pb-35
  • .pb-40
  • .pb-45
  • .pb-50
  • .pb-55
  • .pb-60
  • .pb-65
  • .pb-70
  • .pb-75
  • .pb-80
  • .pb-85
  • .pb-90
  • .pb-95
  • .pb-100

padding verticale

  • .py-5
  • .py-10
  • .py-15
  • .py-20
  • .py-25
  • .py-30
  • .py-35
  • .py-40
  • .py-45
  • .py-50
  • .py-55
  • .py-60
  • .py-65
  • .py-70
  • .py-75
  • .py-80
  • .py-85
  • .py-90
  • .py-95
  • .py-100

padding horizontal

  • .px-5
  • .px-10
  • .px-15
  • .px-20
  • .px-25
  • .px-30
  • .px-35
  • .px-40
  • .px-45
  • .px-50
  • .px-55
  • .px-60
  • .px-65
  • .px-70
  • .px-75
  • .px-80
  • .px-85
  • .px-90
  • .px-95
  • .px-100