Included with Service Portal are a variety of different CSS utility classes loosely based on some of Bootstraps utility classes.
For many of the classes below, you will see a format similar to: “m-t-lg”, this stands for “margin top large”. As I’m sure you can guess, there is also a classes for bottom, left, right, small (sm), medium (md), etc. and all the various combinations thereof. This allows you to easily add consistent margins, padding, colors, etc. without creating custom styles within the widget.
Here is a list we’ve compiled of some of the most common utility classes:
| Padding: | wrapper, wrapper-xs, wrapper-sm, wrapper-md, wrapper-lg, wrapper-xl |
| Horizontal Padding: | padder, padder-xs, padder-md, padder-lg, padder-xl |
| Vertical Padding: | padder-v, padder-v-md, padder-v-lg, padder-v-xl |
| Top Padding: | padder-t, padding-top-s, padding-top-m, padding-top-lg, padder-t-lg, padder-t-xl |
| Right Padding: | pad-right |
| Bottom Padding: | padder-b-none, padder-b, padder-b-md, padder-b-lg, padder-b-xl |
| Left Padding: | N/A |
| Top Margin: | m-t, m-t-none, m-t-xxs, m-t-xs, m-t-sm, m-t-lg, m-t-xl, m-t-n-xs, m-t-n-lg |
| Right Margin: | m-r, m-r-none, m-r-xs, m-r-sm, m-r-lg, m-r-n |
| Bottom Margin: | m-b, m-b-none, m-b-xs, m-b-sm, m-b-lg, m-b-xl, m-b-n |
| Left Margin: | m-l, m-l-none, m-l-xs, m-l-sm, m-l-lg, m-l-n |
| Text Color: | text-muted, text-primary, text-success, text-info, text-warning, text-danger |
| Background Color: | bg-primary, bg-success, bg-info, bg-warning, bg-danger |
| Float Elements | pull-left – Floats an element to the left pull-right – Floats an element to the right |
| Clearing Floats | clearfix – Clears floats |
| Display & Margin | center-block – Sets an element to display:block with margin-right:auto and margin-left:auto |
| Visibility | show – Forces an element to be shown (display:block) hidden – Forces an element to be hidden (display:none) invisible – Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible sr-only – Hides an element to all devices except screen readers sr-only-focusable – Combine with “sr-only” to show the element again when it is focused (e.g. by a keyboard-only user) text-hide – Helps replace an element’s text content with a background image close – Indicates a close icon caret – Indicates dropdown functionality (will reverse automatically in dropup menus) |
| Hide | visible-xs, visible-sm, visible-md, visible-lg |
| Show | hidden-xs, hidden-sm, hidden-md, hidden-lg |
For more details on CSS in Service Portal, you can check out the unofficial documentation on Github: https://github.com/service-portal/documentation/blob/master/documentation/css.md#page
Founder of 
Hey Nathan –
I’ve had issues using some of these classes in Service Portal. Examples would be ALL of the padding classes (i.e. p-t-sm), and the medium margin classes (i.e. m-t-md).
Do you know which ones we should expect to run into issues?
Brian, you are correct. It looks like many of the original utility classes were removed at some point. My bad for not double checking. I’ve updated the document using the actual utility stylesheet in Istanbul.
Hi Nathan,
I need to know how to make something visible in tablet view and not in mobile view. Because when we use hidden-xs it hides in both mobile and tablet view. which class should we need to use?
hidden-xs only hides on mobile, not tablet… unless you’ve modified the utility classes. See docs: https://getbootstrap.com/docs/3.3/css/