diff --git a/docs/lib/Components/LayoutPage.js b/docs/lib/Components/LayoutPage.js
index bbf36ab6c..402bc9b4f 100644
--- a/docs/lib/Components/LayoutPage.js
+++ b/docs/lib/Components/LayoutPage.js
@@ -44,7 +44,8 @@ export default class LayoutsPage extends React.Component {
sm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
md: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
lg: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+ xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ xxl: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
}`}
@@ -73,6 +74,7 @@ Col.propTypes = {
md: columnProps,
lg: columnProps,
xl: columnProps,
+ xxl: columnProps,
// override the predefined width (the ones above) with your own custom widths.
// see https://github.com/reactstrap/reactstrap/issues/297#issuecomment-273556116
widths: PropTypes.array,
diff --git a/docs/lib/examples/ContainerResponsive.js b/docs/lib/examples/ContainerResponsive.js
index cd2c8a94f..b482f6c64 100644
--- a/docs/lib/examples/ContainerResponsive.js
+++ b/docs/lib/examples/ContainerResponsive.js
@@ -9,6 +9,7 @@ const Example = (props) => {
.container-md
.container-lg
.container-xl
+ .container-xxl
.container-fluid
>
);
diff --git a/src/Col.js b/src/Col.js
index 601ce165b..9e3090cc0 100644
--- a/src/Col.js
+++ b/src/Col.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules, tagPropType, isObject } from './utils';
-const colWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
+const colWidths = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
const columnProps = PropTypes.oneOfType([
@@ -24,6 +24,7 @@ const propTypes = {
md: columnProps,
lg: columnProps,
xl: columnProps,
+ xxl: columnProps,
className: PropTypes.string,
cssModule: PropTypes.object,
widths: PropTypes.array,
diff --git a/src/Label.js b/src/Label.js
index fabf2653c..9c562f6a5 100644
--- a/src/Label.js
+++ b/src/Label.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules, tagPropType, isObject } from './utils';
-const colWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
+const colWidths = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
@@ -32,6 +32,7 @@ const propTypes = {
md: columnProps,
lg: columnProps,
xl: columnProps,
+ xxl: columnProps,
widths: PropTypes.array,
};
diff --git a/src/Row.js b/src/Row.js
index 66b7ebc07..5f09d8665 100644
--- a/src/Row.js
+++ b/src/Row.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules, tagPropType, deprecated } from './utils';
-const rowColWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
+const rowColWidths = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
const rowColsPropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
const propTypes = {
@@ -16,7 +16,8 @@ const propTypes = {
sm: rowColsPropType,
md: rowColsPropType,
lg: rowColsPropType,
- xl: rowColsPropType
+ xl: rowColsPropType,
+ xxl: rowColsPropType
};
const defaultProps = {
diff --git a/types/lib/Col.d.ts b/types/lib/Col.d.ts
index 1cc090ad4..6d93e76c9 100644
--- a/types/lib/Col.d.ts
+++ b/types/lib/Col.d.ts
@@ -20,6 +20,7 @@ export interface ColProps extends React.HTMLAttributes {
md?: ColumnProps;
lg?: ColumnProps;
xl?: ColumnProps;
+ xxl?: ColumnProps;
// custom widths
widths?: string[];
diff --git a/types/lib/Label.d.ts b/types/lib/Label.d.ts
index cfae900d7..5a21c603a 100644
--- a/types/lib/Label.d.ts
+++ b/types/lib/Label.d.ts
@@ -18,6 +18,7 @@ export interface LabelProps
md?: ColumnProps;
lg?: ColumnProps;
xl?: ColumnProps;
+ xxl?: ColumnProps;
// custom widths
widths?: string[];
diff --git a/types/lib/Row.d.ts b/types/lib/Row.d.ts
index 17e93bc93..5d66dd91e 100644
--- a/types/lib/Row.d.ts
+++ b/types/lib/Row.d.ts
@@ -15,6 +15,7 @@ export interface RowProps
md?: number | string;
lg?: number | string;
xl?: number | string;
+ xxl?: number | string;
}
declare class Row extends React.Component {}
diff --git a/types/reactstrap-tests.tsx b/types/reactstrap-tests.tsx
index 2b4d51d68..415592c9d 100644
--- a/types/reactstrap-tests.tsx
+++ b/types/reactstrap-tests.tsx
@@ -2150,6 +2150,9 @@ const ExampleResponsiveContainer = (props: any) => {
.container-xl
+
+ .container-xxl
+
.container-fluid