Utilities

Only Utilites that we have changed or added new are shown here. But all Bootstrap4 utilities will work with Simplify

Margin and Padding

Simplify Admin expands on bootstrap utility classes to provide more flexibility with margin and padding

Spacing Utilities follow the bootstrap standard. Except we have more variations in sizes available. Here is how they work:

The classes are named using the format [property][sides]-[size] for xs (Applicable to all devices) and
[property][sides]-[breakpoint]-[size] for sm, md, lg, xl(Applicable to devices larger than used breakpoint)

Start with:
  • m for Margin
  • p for Padding
Add a side
  • t for top (margin-top and padding-top)
  • b for bottom (margin-bottom and padding-bottom)
  • l for left (margin-left and padding-left)
  • r for right (margin-right and padding-right)
  • x for left and right
  • y for top and bottom
  • blank for all sides (margin and padding)
Size

For size Use Number 1 to 14 in increasing order for increased spacing size.

Examples

.mr-t-6 adds a top margin of size 1.5rem for all devices

Borders

You can use utilities to remove a border or add a standard separator colored one

Use border-top, border-bottom, border-left, border-right or border to add a border to the respective side

Add border-[color-variation] class to change the border color (for all 4 sides)

Example

Here is a division with a left info colored border

Removing Borders

You can also use bootstrap default utilities to remove borders

  • border-0 to remove all borders
  • border-top-0 to remove top border
  • border-left-0 to remove left border
  • border-right-0 to remove right border
  • border-bottom-0 to remove bottom border