EGRET
Watson Joyce
settings email exit_to_app
    Dashboards
  • dashboardLearning Management
  • dashboardAnalytic
  • dashboardAnalytic 2
  • dashboardCryptocurrency
  • dashboardSales
  • dashboardSales 2
  • dashboardDonation
  • dashboardJob Management
  • Design System
  • settings_input_componentComponents
    • Accordion
    • Alert
    • Badge
    • Breadcrumb
    • Buttons
    • Dropdown
    • Forms
    • Forms Layout
    • List
    • Pagination
    • Popovers
    • Progressbar
    • Snackbar
    • Tab
    • SweetAlert 2
    • Tooltip
  • text_formatForm Widgets
    • Form Validation
    • Datepicker
    • Form Repeater
    • Time Picker
    • Touch Spin
    • Bootstrap Maxlength
    • Bootstrap Tagify
    • Select2
    • Bootstrap Select
    • Typeahead
    • Inputmask
    • Nouislider
    • Clipboard
    • Dropzone
    • Uppy
    • FilePond
    • format_list_numberedEditor
    • add_photo_alternateImage Crop
  • widgetsWidgets
    • General
    • Charts
  • petsWizard
    • Wizard v1
    • Wizard v2
  • table_chartDataTables
    • Basic
      • Datatable Basic
      • Scrollable
      • Complex Header
      • Pagination Option
    • Advanced
      • Column Rendering
      • Multiple Controls
      • Row Grouping
      • Footer Callback
    • Data Source
      • Datatable HTML
      • Ajax
      • Javascript
    • Search Options
      • Column Select
      • Column Search
    • Extensions
      • Datatable Button
    • grid_onGijgo Grid
  • pie_chartCharts
    • ECharts
    • ChartJS
    • ApexChart
      • Area
      • Bar
      • Bubble
      • Candlestick
      • Column
      • Line
      • Mix
      • Pie
      • Radar
      • Radialbar
      • Sparkline
      • Scatter
  • CUSTOM
  • settings_applicationsPages
    • settings_applicationsSession
      • 404
      • error
      • forgot
      • lockscreen
      • signin
      • signin 2
      • signin 3
      • signin 4
      • signup
      • signup 2
      • signup 3
      • signup 4
    • feedbackFAQ
      • FAQ V1
      • FAQ V2
      • FAQ V3
    • listList
      • List Column
      • List Column 2
      • List Column 3
      • List Column Row
    • monetization_onPricing
      • Pricing v1
      • Pricing v2
      • Pricing v3
    • all_inboxInvoice
      • Invoice v1
      • Invoice v2
      • Invoice v3
    • Profile
    • Profile 2
    • open_withDrag & Drop
  • calendar_todayApps
    • Calendar
      • Event Calendar
    • bookNote
    • saveFile Manager
    • all_inboxInbox
    • all_inboxScrumboard
    • chatChat
  • System Utilities
  • styleSass Variables
  • styleBackgrounds
  • color_lensColors
  • flip_to_frontShadows
  • space_barSpacings
  • text_fieldsTypography
more_vert
close
  • Dashboards
  • Components
    • homeUI Kits
      • removeButtons 1
        • doneChild 1
        • doneChild 2
      • removeBadges
      • removeAlerts
        • Child 3
        • Child 4
    • dashboardApps
    • settingsPages
    • reply_allPlugins
English Spanish Hindi

Notifications

40 Notifications
receipt

New Order Has Been Received

2 hrs ago

how_to_reg

New Customer Has Been Received

4 hrs ago

done_all

Application has been approved

2 hrs ago

add_shopping_cart

New Order Has Been Received

2 hrs ago

how_to_reg

New Customer Has Been Received

4 hrs ago

done_all

Application has been approved

2 hrs ago

add_shopping_cart

New Order Has Been Received

2 hrs ago

Watson Joyce

BTS,func Idi

account_boxMy ProfileassignmentMy TasksmessageMessagessettingsSettings

Spacing

  1. home
  2. System Utilities
  3. Spacing

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • xxxs - (by default) for classes that set the margin or padding to .0625rem
  • xxs - (by default) for classes that set the margin or padding to .125rem
  • xs - (by default) for classes that set the margin or padding to .25rem
  • sm - (by default) for classes that set the margin or padding to .5rem
  • md - (by default) for classes that set the margin or padding to 1rem
  • lg - (by default) for classes that set the margin or padding to 1.5rem
  • xl - (by default) for classes that set the margin or padding to 2rem
  • xxl - (by default) for classes that set the margin or padding to 2.5rem
  • xxxl - (by default) for classes that set the margin or padding to 3rem
  • auto - for classes that set the margin to auto

Negative margins

  • -xxxs - (by default) for classes that set the margin to -.0625rem
  • -xxs - (by default) for classes that set the margin to -.125rem
  • -xs - (by default) for classes that set the margin to -.25rem
  • -sm - (by default) for classes that set the margin to -.5rem
  • -md - (by default) for classes that set the margin to -1rem
  • -lg - (by default) for classes that set the margin to -1.5rem
  • -xl - (by default) for classes that set the margin to -2rem
  • -xxl - (by default) for classes that set the margin to -2.5rem
  • -xxxl - (by default) for classes that set the margin to -3rem

Examples

Positive margin right
<div class="mr-xl"> Margin Right 2rem </div>
Lorem ipsum dolor sit amet
Negative margin right
<div class="mr--md"> Margin Right -1rem </div>
Lorem ipsum dolor sit amet
Positive margin bottom
<div class="mb-md"> Margin Bottom 1rem </div>
Lorem ipsum dolor sit amet
Negative margin bottom
<div class="mb--sm"> Margin Bottom -.5rem </div>
Lorem ipsum dolor sit amet
Margin auto
<div class="md--md"> Margin Left & Right auto </div>
settings
Theme Settings

Sidebar Theme