diff --git a/docs/examples/GridBasic.js b/docs/examples/GridBasic.js
index bf45640919..c8125403b6 100644
--- a/docs/examples/GridBasic.js
+++ b/docs/examples/GridBasic.js
@@ -8,7 +8,7 @@ const gridInstance = (
<{'Col xs={6} md={4}'} />
<{'Col xs={6} md={4}'} />
- <{'Col xs={6} md={4}'} />
+ <{'Col xsHidden md={4}'} />
diff --git a/src/Col.js b/src/Col.js
index 94f5edbe87..9ee4d79865 100644
--- a/src/Col.js
+++ b/src/Col.js
@@ -37,6 +37,38 @@ const Col = React.createClass({
* class-prefix `col-lg-`
*/
lg: React.PropTypes.number,
+ /**
+ * Hide column
+ *
+ * on Extra small devices Phones
+ *
+ * adds class `hidden-xs`
+ */
+ xsHidden: React.PropTypes.bool,
+ /**
+ * Hide column
+ *
+ * on Small devices Tablets
+ *
+ * adds class `hidden-sm`
+ */
+ smHidden: React.PropTypes.bool,
+ /**
+ * Hide column
+ *
+ * on Medium devices Desktops
+ *
+ * adds class `hidden-md`
+ */
+ mdHidden: React.PropTypes.bool,
+ /**
+ * Hide column
+ *
+ * on Large devices Desktops
+ *
+ * adds class `hidden-lg`
+ */
+ lgHidden: React.PropTypes.bool,
/**
* Move columns to the right
*
@@ -158,6 +190,8 @@ const Col = React.createClass({
classes['col-' + classPart + this.props[prop]] = true;
}
+ classes['hidden-' + size] = this.props[size + 'Hidden'];
+
prop = size + 'Offset';
classPart = size + '-offset-';
if (this.props[prop] >= 0) {
diff --git a/test/ColSpec.js b/test/ColSpec.js
index a5bcc35593..5ca480659f 100644
--- a/test/ColSpec.js
+++ b/test/ColSpec.js
@@ -40,4 +40,16 @@ describe('Col', () => {
assert.ok(instanceClassName.match(/\bcol-md-push-0\b/));
assert.ok(instanceClassName.match(/\bcol-lg-push-0\b/));
});
+
+ it('Should set Hidden to true', () => {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ let instanceClassName = ReactDOM.findDOMNode(instance).className;
+ assert.ok(instanceClassName.match(/\bhidden-xs\b/));
+ assert.ok(instanceClassName.match(/\bhidden-sm\b/));
+ assert.ok(instanceClassName.match(/\bhidden-md\b/));
+ assert.ok(instanceClassName.match(/\bhidden-lg\b/));
+ });
});