diff --git a/doc/app/components/hero/index.jsx b/doc/app/components/hero/index.jsx
index 73d87e4..8517b16 100644
--- a/doc/app/components/hero/index.jsx
+++ b/doc/app/components/hero/index.jsx
@@ -11,7 +11,7 @@ const Hero = () => {
         <h1 className={style.headline}>React-FlexBox-Grid</h1>
       </Row>
       <Row className={style.description} center="xs">
-        <code>React(CSS-Modules(flexboxgrid.css));</code>
+        <code>React(CSS-Modules(flexboxgrid2.css));</code>
       </Row>
       <Row center="xs">
         <Button url="https://github.com/roylee0704/react-flexbox-grid">Github</Button>
diff --git a/doc/app/components/home/index.jsx b/doc/app/components/home/index.jsx
index 674c0b0..9751f6c 100644
--- a/doc/app/components/home/index.jsx
+++ b/doc/app/components/home/index.jsx
@@ -26,7 +26,7 @@ const Home = () => (
     <Grid fluid className={home.wrap}>
       <Section
         title="Responsive"
-        description="Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.">
+        description="Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg & xl viewport widths.">
         <Row>
           <Box type="row" xs={12} sm={3} md={2} lg={1} />
           <Box type="row" xs={6} sm={6} md={8} lg={10} />
diff --git a/package.json b/package.json
index 5d497c4..c99397d 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "react-component"
   ],
   "dependencies": {
-    "flexboxgrid": "^6.3.0",
+    "flexboxgrid2": "^7.0.0-alpha7",
     "prop-types": "^15.5.8"
   },
   "devDependencies": {
@@ -48,7 +48,6 @@
     "expect": "^1.13.0",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",
-    "flexboxgrid": "^6.3.0",
     "isparta": "^4.0.0",
     "jsdom": "^7.0.2",
     "karma": "^1.6.0",
diff --git a/react-flexbox-grid.d.ts b/react-flexbox-grid.d.ts
index 86f7a8b..37bff00 100644
--- a/react-flexbox-grid.d.ts
+++ b/react-flexbox-grid.d.ts
@@ -6,7 +6,7 @@
 import {Component} from 'react';
 
 declare namespace __ReactFlexboxGrid {
-  type ViewportSizeType = 'xs' | 'sm' | 'md' | 'lg';
+  type ViewportSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   type ColumnSizeType = number | boolean;
 
   export interface GridProps {
@@ -34,10 +34,12 @@ declare namespace __ReactFlexboxGrid {
     readonly sm?: ColumnSizeType,
     readonly md?: ColumnSizeType,
     readonly lg?: ColumnSizeType,
+    readonly xl?: ColumnSizeType,
     readonly xsOffset?: number,
     readonly smOffset?: number,
     readonly mdOffset?: number,
     readonly lgOffset?: number,
+    readonly xlOffset?: number,
     readonly first?: ViewportSizeType,
     readonly last?: ViewportSizeType,
     readonly className?: string,
diff --git a/src/classNames.js b/src/classNames.js
index 7070825..6f00e35 100644
--- a/src/classNames.js
+++ b/src/classNames.js
@@ -1,4 +1,4 @@
-import styles from 'flexboxgrid/dist/flexboxgrid.css';
+import styles from 'flexboxgrid2/flexboxgrid2.css';
 
 export default function getClass(className) {
   return (styles && styles[className]) ? styles[className] : className;
diff --git a/src/components/Col.js b/src/components/Col.js
index ebca271..8f4b481 100644
--- a/src/components/Col.js
+++ b/src/components/Col.js
@@ -9,10 +9,12 @@ const propTypes = {
   sm: ColumnSizeType,
   md: ColumnSizeType,
   lg: ColumnSizeType,
+  xl: ColumnSizeType,
   xsOffset: PropTypes.number,
   smOffset: PropTypes.number,
   mdOffset: PropTypes.number,
   lgOffset: PropTypes.number,
+  xlOffset: PropTypes.number,
   first: ViewportSizeType,
   last: ViewportSizeType,
   className: PropTypes.string,
@@ -25,10 +27,12 @@ const classMap = {
   sm: 'col-sm',
   md: 'col-md',
   lg: 'col-lg',
+  xl: 'col-xl',
   xsOffset: 'col-xs-offset',
   smOffset: 'col-sm-offset',
   mdOffset: 'col-md-offset',
-  lgOffset: 'col-lg-offset'
+  lgOffset: 'col-lg-offset',
+  xlOffset: 'col-xl-offset'
 };
 
 function isInteger(value) {
diff --git a/src/types.js b/src/types.js
index 8a72838..46540f0 100644
--- a/src/types.js
+++ b/src/types.js
@@ -1,4 +1,4 @@
 import PropTypes from 'prop-types';
 
 export const ColumnSizeType = PropTypes.oneOfType([PropTypes.number, PropTypes.bool]);
-export const ViewportSizeType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg']);
+export const ViewportSizeType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']);
diff --git a/test/classNames.spec.js b/test/classNames.spec.js
index febfd66..884ed0e 100644
--- a/test/classNames.spec.js
+++ b/test/classNames.spec.js
@@ -1,5 +1,5 @@
 import expect from 'expect';
-import style from 'flexboxgrid';
+import style from 'flexboxgrid2';
 import getClass from '../src/classNames';
 
 describe('classNames lookups', () => {
diff --git a/test/components/Col.spec.js b/test/components/Col.spec.js
index b3896bf..5986e38 100644
--- a/test/components/Col.spec.js
+++ b/test/components/Col.spec.js
@@ -2,19 +2,20 @@ import expect from 'expect';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import Col, { getColumnProps } from '../../src/components/Col';
-import style from 'flexboxgrid';
+import style from 'flexboxgrid2';
 
 const renderer = TestUtils.createRenderer();
 
 describe('Col', () => {
   it('Should add classes equals to props', () => {
-    renderer.render(<Col xs={12} sm={8} md={6} lg={4} />);
+    renderer.render(<Col xs={12} sm={8} md={6} lg={4} xl={2} />);
     const { type, props: { className } } = renderer.getRenderOutput();
     expect(type).toBe('div');
     expect(className).toContain(style['col-xs-12']);
     expect(className).toContain(style['col-sm-8']);
     expect(className).toContain(style['col-md-6']);
     expect(className).toContain(style['col-lg-4']);
+    expect(className).toContain(style['col-xl-2']);
   });
 
   it('Computes the column properties', () => {
@@ -38,16 +39,17 @@ describe('Col', () => {
   });
 
   it('Should support auto-width', () => {
-    renderer.render(<Col xs sm md lg />);
+    renderer.render(<Col xs sm md lg xl />);
     const { className } = renderer.getRenderOutput().props;
     expect(className).toContain(style['col-xs']);
     expect(className).toContain(style['col-sm']);
     expect(className).toContain(style['col-md']);
     expect(className).toContain(style['col-lg']);
+    expect(className).toContain(style['col-xl']);
   });
 
   it('Should support custom tag name', () => {
-    renderer.render(<Col xs sm md lg tagName="li" />);
+    renderer.render(<Col xs sm md lg xl tagName="li" />);
 
     expect(renderer.getRenderOutput().type).toBe('li');
   });
diff --git a/test/components/Grid.spec.js b/test/components/Grid.spec.js
index 7956809..8ac977c 100644
--- a/test/components/Grid.spec.js
+++ b/test/components/Grid.spec.js
@@ -2,7 +2,7 @@ import expect from 'expect';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import Grid from '../../src/components/Grid';
-import style from 'flexboxgrid';
+import style from 'flexboxgrid2';
 
 const renderer = TestUtils.createRenderer();
 
diff --git a/test/components/Row.spec.js b/test/components/Row.spec.js
index ac828dd..9b68d6a 100644
--- a/test/components/Row.spec.js
+++ b/test/components/Row.spec.js
@@ -2,7 +2,7 @@ import expect from 'expect';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import Row, { getRowProps } from '../../src/components/Row';
-import style from 'flexboxgrid';
+import style from 'flexboxgrid2';
 
 const renderer = TestUtils.createRenderer();
 
diff --git a/yarn.lock b/yarn.lock
index d5cced9..ba3cf1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2173,9 +2173,11 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
-flexboxgrid@^6.3.0:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/flexboxgrid/-/flexboxgrid-6.3.1.tgz#e99898afc07b7047722bb81a958a5fba4d4e20fd"
+flexboxgrid2@^7.0.0-alpha7:
+  version "7.0.0-alpha7"
+  resolved "https://registry.yarnpkg.com/flexboxgrid2/-/flexboxgrid2-7.0.0-alpha7.tgz#758f16b40506439cb0b727de085058f2e53523a1"
+  dependencies:
+    normalize.css "^7.0.0"
 
 for-in@^0.1.5:
   version "0.1.6"
@@ -3644,6 +3646,10 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+normalize.css@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf"
+
 "npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"