Alert This post is over a year old, some of this information may be out of date.

Offset classes are coming to Office UI Fabric

January 28, 2016

A week ago I submitted a pull request to the Office UI Fabric repository to include a new set of offset classes. These offset classes could come in handy when you want to position your elements on the page.

Info: here you can see the details of the pull request -

Today the pull request got merged into the master branch. That means that in the upcoming release you will be able to make use of these new classes.

What does these offset classes do?

The offset classes allow you to move elements / columns to the right.

Offset classes example
Offset classes example

Here is a Codepen example for you to fiddle around with:

See the Pen VexrVx by Elio (@estruyf) on CodePen.

Which classes are available?

You have classes available for: small, medium, large, XL, XXL, and XXXL.

  • .ms-u-*Offset0 - offset reset class
  • .ms-u-*Offset1 - move one column
  • .ms-u-*Offset2 - move two columns
  • .ms-u-*Offset3
  • .ms-u-*Offset4
  • .ms-u-*Offset5
  • .ms-u-*Offset6
  • .ms-u-*Offset7
  • .ms-u-*Offset8
  • .ms-u-*Offset9
  • .ms-u-*Offset10
  • .ms-u-*Offset11

Important: change the asterisk “*” by one of the device sizes: sm, md, lg, xl, xxl, or xxxl.


Office UI Fabric announced yesterday the these classes are available in version 2.

Office UI Fabric tweet
Office UI Fabric tweet


comments powered by Disqus