logo
    • Logout
  • image missing
  • JOSH

  • Dashboard
  • Typography
  • Content
    • Accordion
    • Alert
    • Apex Charts
    • Buttons
    • Cards
    • Calendar
    • Charts
    • Dropdown
    • Forms
    • Form Layouts
    • Form Examples
    • Progress Bar
    • Pagination
    • Icons
    • Tabs
    • Modals
  • Tables
    • Table
    • Advanced Data Table
    • TUI Grid Table
    • Simple DataTable
  • Pages
    • Form Elements-Select I
    • Form Elements-Select II
    • Advanced Form Elements
    • Toastr Notification
    • Advanced Alerts

Spacing Utilities

  1. Content
  2. Spacing Utilities

Padding and margin classes

Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. It uses Bootstrap 4 spacing format of {property}{sides}-{size}. Available sizes can be any of:

  • 4 5 8 10 12 15 16 20 24 25 30 35 40 45 50 60 70 80 90 100
  • 120 140 150 160 180 200
  • 250 300

Padding classes

Class name Description
.pt-40 padding-top: 40px
.pb-40 padding-bottom: 40px
.ps-40 padding-left: 40px
.pe-40 padding-right: 40px
.px-40 padding-left: 40px
padding-right: 40px
.py-40 padding-top: 40px
padding-bottom: 40px
.p-40 padding: 40px

Margin classes

Class name Description
.mt-40 margin-top: 40px
.mb-40 margin-bottom: 40px
.ms-40 margin-left: 40px
.me-40 margin-right: 40px
.mx-40 margin-left: 40px
margin-right: 40px
.my-40 margin-top: 40px
margin-bottom: 40px
.m-40 margin: 40px