Grids

Throughout this article, we'll build on the pieces you'll put together to create columns using the Front Street grid system and how to overcome various real-world layout problems. Our grid system uses Flexbox CSS to create fluid layout columns. And we include classes for both a 10-column and 12-column grid system to give you the ultimate flexibility in building the different layouts within your website.

  1. General Overview
  2. Responsiveness
  3. Column Widths
  4. Row Containers
  5. No Gutters
  6. Nested Columns
  7. Columns With Backgrounds
  8. Column Alignment
  9. Column Ordering
  10. Column Offsetting

General Overview

There are three basic steps to remember when setting up a row of columns — Rows, columns and content.

  1. Rows: Create a wrapping element with class row.
  2. Columns: Add your column elements directly within. Each column should have class col followed by a class to determine its responsive breakpoint and width formatted like col-{breakpoint}-{size}.
  3. Content: Within each column, we'll add an element with class wrap, which will contain the content.
...
...

Auto-Sizing, Equal-Width Columns

When not including a specifc column size, all .col-{breakpoint} elements will automatically adjust to be equal width, depending on the number of columns. Below is a basic example of a single row of three, equal-width columns. Each .col element has class col-md added to it, meaning they will be equal in width and stack responsively below the md breakpoint.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

...
...
...

Specifying Column Widths

For a row with columns varying in width, you can construct your column classes like col-{breakpoint}-{size}. See column widths for more on sizing using the 10-column and 12-column grid systems.

In the following example, we have two columns sized at 4/12 and 8/12, which will responsively stack when the viewport is less than the md breakpoint.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum. Mauris tempus convallis lectus, placerat hendrerit ligula auctor id.

...
...

Multiple Rows

Multiple rows of columns can simply be stacked one after the next, as well. Separating multiple rows into separate .row elements is necessary primarily because the .row element is what will space the columns vertically from each other. And additionally in the following scenario, it's necessary also because our first row is using auto-sizing .col-md elements that are intended to be 1/3 each.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum. Mauris tempus convallis lectus, placerat hendrerit ligula auctor id.

...
...
...
...
...

Note: A .row element will have margin on the bottom to separate it from the next .row element. However, you don't need to separate multiple rows of columns into separate .row elements if you don't need that spacing. Having several rows within a single .row.row-no-gutters element is a good example when you might do this.

Responsiveness

When setting up any grid, it's important to decide what viewport you want those columns to collapse at (i.e. stack). To do this, you'll pick either xs, sm, md, or lg, to use within your grid classes.

.col-xs Classes containing xs will never collapse.
.col-xs-{size}
.col-xs-offset-{size}
.col-xs-order-first
.col-xs-order-last
.row-xs-reverse
.col-sm Classes containing sm will collapse and begin to stack when viewport is less than 576px. This will generally include smaller mobile devices.
.col-sm-{size}
.col-sm-offset-{size}
.col-sm-order-first
.col-sm-order-last
.row-sm-reverse
.col-md Classes containing md will collapse and begin to stack when viewport is less than 768px. This will generally include slightly larger mobile devices (or those in the landscape orientation) and smaller mobile devices.
.col-md-{size}
.col-md-offset-{size}
.col-md-order-first
.col-md-order-last
.row-md-reverse
.col-lg Classes containing lg will collapse and begin to stack when viewport is less than 992px. This will generally include tablets (in portrait orientation) and any mobile device smaller than that.
.col-lg-{size}
.col-lg-offset-{size}
.col-lg-order-first
.col-lg-order-last
.row-lg-reverse
.col-xl Classes containing xl will collapse and begin to stack when viewport is less than 1200px. This will generally include smaller desktop computers, and all tablets and mobile devices.
.col-xl-{size}
.col-xl-offset-{size}
.col-xl-order-first
.col-xl-order-last
.row-xl-reverse

Note: Responsive breakpoints can also be mixed for some more complex layouts. See mixing column widths below.

Column Widths

Something fairly unique to Front Street is that we provide a 10-column grid system that can be used throughout your website in conjunction with the standard 12-column grid system. Our goal with this is to give you more flexbility in your column widths.

12-Column Grid

When grouping classes in a 12-column grid system, you want to make sure the integers all add up to 12.

12
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12
Fraction Percentage Never Collapse Collapse @576px Collapse @767px Collapse @991px Collapse @1199px
1/12 8.33% .col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 .col-xl-1
1/6 16.66% .col-xs-2 .col-sm-2 .col-md-2 .col-lg-2 .col-xl-2
1/4 25% .col-xs-3 .col-sm-3 .col-md-3 .col-lg-3 .col-xl-3
1/3 33.33% .col-xs-4 .col-sm-4 .col-md-4 .col-lg-4 .col-xl-4
5/12 41.66% .col-xs-5 .col-sm-5 .col-md-5 .col-lg-5 .col-xl-5
1/2 50% .col-xs-6 .col-sm-6 .col-md-6 .col-lg-6 .col-xl-6
7/12 58.33% .col-xs-7 .col-sm-7 .col-md-7 .col-lg-7 .col-xl-7
2/3 66.66% .col-xs-8 .col-sm-8 .col-md-8 .col-lg-8 .col-xl-8
3/4 75% .col-xs-9 .col-sm-9 .col-md-9 .col-lg-9 .col-xl-9
5/6 83.33% .col-xs-10 .col-sm-10 .col-md-10 .col-lg-10 .col-xl-10
11/12 91.66% .col-xs-11 .col-sm-11 .col-md-11 .col-lg-11 .col-xl-11
12/12 100% .col-xs-12 .col-sm-12 .col-md-12 .col-lg-12 .col-xl-12

10-Column Grid

To separate this 10-column grid system, the column integers used in the classes are formatted like 010, 020, 030, 040, etc. However, conceptually everything is still the same; you'll want the integers to add up to 10. Below are a few examples.

0100
010
090
020
080
030
070
040
060
050
050
060
040
070
030
080
020
090
010
0100
Fraction Percentage Never Collapse Collapse @576px Collapse @767px Collapse @991px Collapse @1199px
1/10 10% .col-xs-010 .col-sm-010 .col-md-010 .col-lg-010 .col-xl-010
1/5 20% .col-xs-020 .col-sm-020 .col-md-020 .col-lg-020 .col-xl-020
3/10 30% .col-xs-030 .col-sm-030 .col-md-030 .col-lg-030 .col-xl-030
2/5 40% .col-xs-040 .col-sm-040 .col-md-040 .col-lg-040 .col-xl-040
1/2 50% .col-xs-050 .col-sm-050 .col-md-050 .col-lg-050 .col-xl-050
3/5 60% .col-xs-060 .col-sm-060 .col-md-060 .col-lg-060 .col-xl-060
7/10 70% .col-xs-070 .col-sm-070 .col-md-070 .col-lg-070 .col-xl-070
4/5 80% .col-xs-080 .col-sm-080 .col-md-080 .col-lg-080 .col-xl-080
9/10 90% .col-xs-090 .col-sm-090 .col-md-090 .col-lg-090 .col-xl-090
10/10 100% .col-xs-0100 .col-sm-0100 .col-md-0100 .col-lg-0100 .col-xl-0100

Mixing Columns Widths

Even with fluid columns, we sometimes face real-world layout issues with columns being the same widths across all viewports, before their stacking point.

For example, let's say our website's layout is three columns — A middle content column surrounded by two sidebars. On really large desktops we don't want gigantic sidebars. However, the issue is that once we reach a bit smaller desktop, our sidebars then become too narrow. This is where mixing column classes intended for different viewports can come in handy.

The following example has our three-column layout, with the columns setup for the xl breakpoint and above, distributed as 3/12 - 6/12 - 3/12.

Left Sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Right Sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

...
...
...

And now we can see that the above example's columns will display how we want when the viewport is 1200px or larger, but then simply stack responsively below that.

So now let's build on our above example and add a new set of classes to adjust the widths to be distributed evenly (i.e. three equal-width columns) when at the lg and md viewport sizes.

Left Sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Right Sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

...
...
...

Row Containers

By default your columns have gutters to separate their content from each other. And in order for the content of your first and last columns to sit flush against the edge of the row, the .row elements have negative margin on the sides.

In some circustances, this can cause layout issues (like unwanted horizontal mobile scrolling, for example) depending on what's wrapping your columns. So while completely optional and only necessary if needed, .row-container elements can be used to fix this.

Consider the following example with a standard row of three columns, where you can see the negative margins of the row pushing the content flush against the sides of the container.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

...

But if we wanted to the outer edge of our row to sit naturally without any negative margin, we can wrap it in an element with class row-container.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

...

No Gutters

By default, columns have padding on the sides that we call gutters, and then as we discussed in the previous section, the wrapping .row element has equal negative margin on the sides to allow the content within columns to appear flush against. By adding the no-gutters class to a .row element, you can remove all column gutters along with the negative margin on the row meant to counteract the first and last gutters.

The example below has two matching columns, with the second row having the row-no-gutters class applied.

First
Second
Third
First
Second
Third
...
...

Note: If you're wanting to maintain your column gutters, but simply counteract the negative side margins of a .row element, remember that you can use row containers from above.

Nested Columns

You can also nest rows of columns within columns. Here's an example using automatic, equal-width columns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Mauris tempus convallis lectus, placerat hendrerit ligula auctor id. Donec sodales ultrices leo, vel tempor libero. Donec maximus faucibus scelerisque.

Maecenas pharetra augue risus, eu pretium arcu rhoncus eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Mauris tempus convallis lectus, placerat hendrerit ligula auctor id. Donec sodales ultrices leo, vel tempor libero. Donec maximus faucibus scelerisque.

Maecenas pharetra augue risus, eu pretium arcu rhoncus eget.

Columns With Backgrounds

By default, columns are styled for raw content within to be laid out nicely. But when adding background colors to your columns, this will generally change the desired layout.

Consider the following example. — We've got a basic row of three columns and have simply added classes from the color library to give .wrap content elements background colors.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

...
...
...

The first issue we see in the above example is that now our content elements don't have enough padding because of the background colors added.

So next we can add the class has-bg to our columns, which will add padding to the .wrap elements within.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

...
...
...

This will also go nicely with the row-no-gutters class discussed above.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

...
...
...

And earlier we said that if you need spacing between each row, that you should separate your columns into separate .row elements. However, a gutterless grid with background colors might be a great example not to do that.

So, the following example takes nine columns all specified to be 4/12, but contained in the same .row element.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

Column #9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

...
...
...
...
...
...
...
...
...

Can I mix and match? — Sure! Not every column in a row needs a background color. Below is an example where we just want the second column to have a background color, and so only the second column will need the has-bg helper class.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

Mauris tempus convallis lectus, placerat hendrerit ligula auctor id. Donec sodales ultrices leo, vel tempor libero. Donec maximus faucibus scelerisque.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum.

...
...

Alignment

Utilizing the power of Flexbox CSS, we can provide several helpful classes for aligning columns in a grid.

Vertical Alignment

By default columns will stretch vertically to fill the height of their row.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris tempus convallis lectus, placerat hendrerit ligula auctor id.

To align your columns vertically to the top of a row, you can add class row-align-top to the wrapping .row element.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris tempus convallis lectus, placerat hendrerit ligula auctor id.

...

To align your columns vertically to the middle of a row, you can add class row-align-middle to the wrapping .row element.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris tempus convallis lectus, placerat hendrerit ligula auctor id.

...

To align your columns vertically to the bottom of a row, you can add class row-align-bottom to the wrapping .row element.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris tempus convallis lectus, placerat hendrerit ligula auctor id.

...

You can also align individual columns within a row, by adding the col-align-top, col-align-middle, and col-align-bottom classes to the individual columns.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

...
...
...

Horizontal Alignment

By default columns will be aligned to the start of their row.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

To align your columns horizontally to the end of a row, you can add class row-align-end to the wrapping .row element.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

...

To align your columns horizontally to the center of a row, you can add class row-align-center to the wrapping .row element.

Column #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

...

You can also align individual columns within a row, by adding the col-align-start, col-align-center, and col-align-end classes to the individual columns instead of the wrapping row.

Column #1
Column #2
Column #3
...
...
...

Combining Horizontal and Vertical Alignment

And of course, we can combine vertical and horizontal alignment classes.

For example, combining row-align-center and row-align-middle can help us to achieve a common scenario of placing a column perfectly centered within a row that's been given a specific height larger than the column, itself.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

...

And for fun, below is a less practical example, but just showing how we can apply this concept to indvidual columns within.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

...
...

Note: IE 10-11 have issues with vertical alignment, when a .row relies only on min-height. So make sure to set a CSS height on your .row element, if you want it to be taller than all columns within, like the two examples above.

Distribution

When your columns don't all add up to 100%, you can evenly distribute the space around them by adding class row-space-around to the .row element.

Column #1
Column #2
Column #3
...

And similarly, you can evenly distribute the space around, but with the first and last columns against the row edges, by adding class row-space-between to the .row element.

Column #1
Column #2
Column #3
...

Alignment Overview

Element Orientation Alignment Use with .row Use with .col
.row-align-top Vertical Top
.row-align-middle Vertical Middle
.row-align-bottom Vertical Bottom
.row-align-start Horizontal Start
.row-align-center Horizontal Center
.row-align-end Horizontal End
.row-space-around Horizontal Even distribution, all around
.row-space-between Horizontal Even distribution, against outer edges
.col-align-top Vertical Top
.col-align-middle Vertical Middle
.col-align-bottom Vertical Bottom
.col-align-start Horizontal Start
.col-align-center Horizontal Center
.col-align-end Horizontal End

Column Ordering

Keeping a mobile-first approach in mind, column ordering classes can be very useful. Your HTML markup will be naturally ordered for the mobile view, but then by adding ordering classes you can adjust the display order on larger viewports where your columns are laid out.

A really common dilemma column ordering solves is with laying out the content and sidebars of a website. — For example, if you have a layout with a left sidebar and main content area, you don't want (1) your mobile users seeing that left sidebar at the top, before your main content and (2) Google reading that sidebar first in your HTML markup. So this can be solved by outputting your primary content column first, but then using ordering classes to display the sidebar on the left at the larger, specified viewport.

Reverse Order

To reverse the order of all columns in a row, use one of the row-{breakpoint}-reverse classes on your .row element.

First
Second
Third
First
Second
Third

First and Last

To bump a single column into the first position of a row, add class col-{breakpoint}-order-first to the column.

First
Second
Third
First
Second
Third

And similarly, to bump a single column into the last position of a row, add class col-{breakpoint}-order-last to the column.

First
Second
Third
First
Second
Third

Ordering Overview

Always Ordered Ordered Above 576px Ordered Above 767px Ordered Above 991px Ordered Above 1199px
.row-xs-reverse .row-sm-reverse .row-md-reverse .row-lg-reverse .row-xl-reverse
.col-xs-first-order .col-sm-first-order .col-md-first-order .col-lg-first-order .col-xl-first-order
.col-xs-last-order .col-sm-last-order .col-md-last-order .col-lg-last-order .col-xl-last-order

Column Offsetting

Move columns inward using .col-{breakpoint}-offset-{size} classes. These classes increase the left margin of a column by specified number of columns. For example, adding the class col-md-offset-4 to a column element moves it over four columns.

11
1
10
2
9
3
8
4
7
7
6
6
5
7
4
8
3
9
2
10
1
11
Offset Distance Collapse @576px Collapse @767px Collapse @991px Collapse @1199px
1/12 8.33% .col-xs-offset-1 .col-sm-offset-1 .col-md-offset-1 .col-lg-offset-1
1/10 10% .col-xs-offset-010 .col-sm-offset-010 .col-ms-offset-010 .col-lg-offset-010
1/6 16.66% .col-xs-offset-2 .col-sm-offset-2 .col-md-offset-2 .col-lg-offset-2
1/5 20% .col-xs-offset-020 .col-sm-offset-020 .col-md-offset-020 .col-lg-offset-020
1/4 25% .col-xs-offset-3 .col-sm-offset-3 .col-md-offset-3 .col-lg-offset-3
3/10 30% .col-xs-offset-030 .col-sm-offset-030 .col-md-offset-030 .col-lg-offset-030
1/3 33.33% .col-xs-offset-4 .col-sm-offset-4 .col-md-offset-4 .col-lg-offset-4
2/5 40% .col-xs-offset-040 .col-sm-offset-040 .col-md-offset-040 .col-lg-offset-040
5/12 41.66% .col-xs-offset-5 .col-sm-offset-5 .col-md-offset-5 .col-lg-offset-5
1/2 50% .col-xs-offset-6 .col-sm-offset-6 .col-md-offset-6 .col-lg-offset-6
7/12 58.33% .col-xs-offset-7 .col-sm-offset-7 .col-md-offset-7 .col-lg-offset-7
3/5 60% .col-xs-offset-060 .col-sm-offset-060 .col-md-offset-060 .col-lg-offset-060
2/3 66.66% .col-xs-offset-8 .col-sm-offset-8 .col-md-offset-8 .col-lg-offset-8
7/10 70% .col-xs-offset-070 .col-sm-offset-070 .col-md-offset-070 .col-lg-offset-070
3/4 75% .col-xs-offset-9 .col-sm-offset-9 .col-md-offset-9 .col-lg-offset-9
4/5 80% .col-xs-offset-080 .col-sm-offset-080 .col-md-offset-080 .col-lg-offset-080
5/6 83.33% .col-xs-offset-10 .col-sm-offset-10 .col-md-offset-10 .col-lg-offset-10
9/10 90% .col-xs-offset-090 .col-sm-offset-090 .col-md-offset-090 .col-lg-offset-090
11/12 91.66% .col-xs-offset-11 .col-sm-offset-11 .col-md-offset-11 .col-lg-offset-11