React Bootstrap Grid system
React Grid system - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Use the powerful responsive flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, and dozens of predefined classes.
How it works
MDBReact grid system uses a series of components: Rows, Containers and Columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
New to or unfamiliar with flexbox? Read our CSS flexbox guide.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol>One of three columns</MDBCol>
<MDBCol>One of three columns</MDBCol>
<MDBCol>One of three columns</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
The above example creates three equal-width columns on small, medium, large, and extra large devices using our
predefined
grid classes. Those columns are centered in the page with the parent
Containercomponent.
Breaking it down, here’s how it works:
- Containers provide a means to center your site’s contents. Use
<MDBContainer>component for fixed width or<MDBContainer fluid >forwidth: 100%across all viewport and device sizes. - Rows are wrappers for columns. Each MDBCol has horizontal
padding(called a gutter) for controlling the space between them. Thispaddingis then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side. - In a grid layout, content must be placed within MDBCol and only MDBCol may be immediate children of MDBRow.
- Thanks to flexbox, Columns without a specified
widthwill automatically layout as equal width Columns. For example, four instances of - Column props indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want
three
equal-width columns, you can use
- MDBCol
widths are set in percentages, so they’re always fluid and sized relative to their parent element. - MDBCol have horizontal
paddingto create the gutters between individual columns, however, you can remove themarginfrom MDBRow andpaddingfrom MDBCol with.no-guttersclassName on theMDBRow. - To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
- Grid breakpoints are based on minimum width media queries, meaning
they apply to that one breakpoint and all those above it (e.g.,
xsbreakpoint). - You can use predefined grid classes (like
Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.
Grid options
While Bootstrap uses
ems or
rems for defining most sizes,
pxs are used for grid breakpoints and container widths. This is because the viewport width is in
pixels and does
not change with the
font size.
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
Extra small
<576px |
Small
≥576px |
Medium
≥768px |
Large
≥992px |
Extra large
≥1200px |
|
|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| prop |
xs
|
sm
|
md
|
lg
|
xl
|
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Auto-layout columns
Equal-width
For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol>1 of 2</MDBCol>
<MDBCol>2 of 2</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol>1 of 3</MDBCol>
<MDBCol>2 of 3</MDBCol>
<MDBCol>3 of 3</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Equal-width <MDBCol>can be broken into multiple lines.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol>Column</MDBCol>
<MDBCol>Column</MDBCol>
<div className="w-100" />
<MDBCol>Column</MDBCol>
<MDBCol>Column</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Setting one column width
You can set the width of one <MDBCol> and have the sibling <MDBCol>
components automatically
resize around it.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol>1 of 3</MDBCol>
<MDBCol size="6">2 of 3 (wider)</MDBCol>
<MDBCol>3 of 3</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol>1 of 3</MDBCol>
<MDBCol size="5">2 of 3 (wider)</MDBCol>
<MDBCol>3 of 3</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Equal-width multi-row
Create equal-width <MDBCol> that span multiple rows by inserting a
where you want the columns to break to a new line. Make the breaks
responsive by mixing the
.w-100 with some
responsive display utilities.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol>col</MDBCol>
<MDBCol>col</MDBCol>
<div className="w-100" />
<MDBCol>col</MDBCol>
<MDBCol>col</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Responsive classes
MDBReact grid includes five tiers of props for building complex responsive layouts. Customize the size
of your <MDBCol> on extra small, small, medium, large, or extra large devices however you see
fit.
All breakpoints
For grids that are the same from the smallest of devices to the largest, use the
size prop. Specify a value when you need a particularly sized column; otherwise, feel free
ommit it.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol>col</MDBCol>
<MDBCol>col</MDBCol>
<MDBCol>col</MDBCol>
<MDBCol>col</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol size="8">col-8</MDBCol>
<MDBCol size="4">col-4</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Stacked to horizontal
Using a single set of
sm classes, you can create a basic grid system that starts out stacked before becoming horizontal on
desktop
(medium) devices.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol sm="8">col-sm-8</MDBCol>
<MDBCol sm="4">col-sm-4</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol size="sm">col-sm</MDBCol>
<MDBCol size="sm">col-sm</MDBCol>
<MDBCol size="sm">col-sm</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Mix and match
Don’t want your <MDBCol> to simply stack in some grid tiers? Use a combination of different
props for each tier as needed.
See the example below for a better idea of how it all works.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol md="8">
.col .col-md-8
</MDBCol>
<MDBCol size="6" md="4">
.col-6 .col-md-4
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol size="6" md="4">
.col-6 .col-md-4
</MDBCol>
<MDBCol size="6" md="4">
.col-6 .col-md-4
</MDBCol>
<MDBCol size="6" md="4">
.col-6 .col-md-4
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol size="6">
.col-6
</MDBCol>
<MDBCol size="6">
.col-6
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Alignment
Use MDBReact alignment utilities to vertically and horizontally align columns.
Vertical alignment
For grids that are the same from the smallest of devices to the largest, use the
.col and
.col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel
free to stick
to
.col.
Align items start
Align items center
Align items end
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow top>
<MDBCol>One of three columns</MDBCol>
<MDBCol>One of three columns</MDBCol>
<MDBCol>One of three columns</MDBCol>
</MDBRow>
<MDBRow middle>
<MDBCol>One of three columns</MDBCol>
<MDBCol>One of three columns</MDBCol>
<MDBCol>One of three columns</MDBCol>
</MDBRow>
<MDBRow bottom>
<MDBCol>One of three columns</MDBCol>
<MDBCol>One of three columns</MDBCol>
<MDBCol>One of three columns</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Algin self
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol top>One of three columns</MDBCol>
<MDBCol middle>One of three columns</MDBCol>
<MDBCol bottom>One of three columns</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Horizontal alignment
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow start>
<MDBCol size="4">One of two columns</MDBCol>
<MDBCol size="4">One of two columns</MDBCol>
</MDBRow>
<MDBRow center>
<MDBCol size="4">One of two columns</MDBCol>
<MDBCol size="4">One of two columns</MDBCol>
</MDBRow>
<MDBRow end>
<MDBCol size="4">One of two columns</MDBCol>
<MDBCol size="4">One of two columns</MDBCol>
</MDBRow>
<MDBRow around>
<MDBCol size="4">One of two columns</MDBCol>
<MDBCol size="4">One of two columns</MDBCol>
</MDBRow>
<MDBRow between>
<MDBCol size="4">One of two columns</MDBCol>
<MDBCol size="4">One of two columns</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
No gutters
The gutters between columns in our predefined grid classes can be removed with
.no-gutters. This removes the negative
margins from
<MDBRow> and the horizontal
padding from all immediate children <MDBCol>.
Need an edge-to-edge design? Remove the parent
<MDBContainer> or
<MDBContainer fluid> component.
Column wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol size="9">
.col-9
</MDBCol>
<MDBCol size="4">
.col-4
<br />
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
</MDBCol>
<MDBCol size="6">
.col-6
<br />
Subsequent columns continue along the new line.
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Column breaks
Breaking columns to a new line in flexbox requires a small hack: add an element with
width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with
multiple
<MDBRow>s, but not every implementation method can account for this.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol size="6" sm="4">
.col-6 .col-sm-4
</MDBCol>
<MDBCol size="6" sm="4">
.col-6 .col-sm-4
</MDBCol>
<div className="w-100"></div>
<MDBCol size="6" sm="4">
.col-6 .col-sm-4
</MDBCol>
<MDBCol size="6" sm="4">
.col-6 .col-sm-4
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Reordering
Order classes
Use
.order- classes for controlling the
visual order of your content. These classes are responsive, so you can set the
order by breakpoint (e.g.,
.order-1.order-md-2). Includes support for
1 through
12 across all five grid tiers.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol>First, but unordered</MDBCol>
<MDBCol className="order-12">Second, but last</MDBCol>
<MDBCol className="order-1">Third, but second</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
There are also responsive
.order-first and
.order-last classes that change the order of an element by applying
order: -1 and
order: 13 (
order: $columns + 1), respectively. These classes can also be intermixed with the numbered
.order-* classes as needed.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol>First, but unordered</MDBCol>
<MDBCol> Second, but unordered</MDBCol>
<MDBCol className="order-first">Third, but first</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Offsetting columns
You can offset <MDBCol> in two ways: our responsive
.offset- grid classes and our
margin utilities. Grid classes are sized to
match columns while margins are more useful for quick layouts where the
width of the offset is variable.
Offset classes
Move columns to the right using
.offset-md-* classes. These classes increase the left margin of a column by
* columns. For example,
.offset-md-4 moves
.col-md-4 over four columns.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol md="4">.col-md-4</MDBCol>
<MDBCol md="4" className="offset-md-4">
.col-md-4 .offset-md-4
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="3" className="offset-md-3">
.col-md-3 .offset-md-3
</MDBCol>
<MDBCol md="3" className="offset-md-3">
.col-md-3 .offset-md-3
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="offset-md-3">.col-md-6 .offset-md-3</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action:
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol sm="5" md="6">
.col-sm-5 .col-md-6
</MDBCol>
<MDBCol sm="5" md="6" className="offset-sm-2 offset-md-0">
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol sm="6" md="5" lg="6">
.col-sm-6 .col-md-5 .col-lg-6
</MDBCol>
<MDBCol sm="6" md="5" lg="6" className="offset-md-2 offset-lg-0">
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Margin utilities
You can use margin utilities like
.mr-auto to force sibling <MDBCol> away from one another.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol md="4">.col-md-4</MDBCol>
<MDBCol md="4" className="ml-auto">
.col-md-4 .ml-auto
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="3" className="ml-md-auto">
.col-md-3 .ml-md-auto
</MDBCol>
<MDBCol md="3" className="ml-md-auto">
.col-md-3 .ml-md-auto
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol size="auto" className="mr-auto">
.col-auto .mr-auto
</MDBCol>
<MDBCol size="auto">.col-auto</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
Nesting
To nest your content with the default grid, add a new
<MDBRow> and set of
<MDBCol> columns within an existing
<MDBCol> column. Nested rows should include a set of columns that add up to 12 or fewer (it is
not required that
you use all 12 available columns).
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
const GridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol sm="9">
Level 1: .col-sm-9
<MDBRow>
<MDBCol size="8" sm="6">Level 2: .col-8 .col-sm-6</MDBCol>
<MDBCol size="4" sm="6">Level 2: .col-4 .col-sm-6</MDBCol>
</MDBRow>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default GridExamplesPage;
React Grid System - API
In this section you will find advanced information about React Gid System. You will find out which modules are required, what are the possibilities of configuring, and what events and methods you can use in working with it.
Grid system import statement
In order to use Grid system components make sure you have imported proper modules first.
import { MDBContainer, MDBRow, MDBCol } from 'mdbreact';
API Reference: MDBContainer Properties
The table below shows the configuration options of the MDBContainer component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
String | |
Adds custom classes | <MDBContainer className="myClass" ... /> |
fluid |
Boolean | |
Use for a full width container, spanning the entire width of your viewport. | <MDBContainer fluid ... /> |
API Reference: MDBRow Properties
The table below shows the configuration options of the MDBRow component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
around |
Boolean | |
Changes alignment of items within MDBRow component. It distributes space around direct childrens | <MDBRow around ... /> |
between |
Boolean | |
Changes alignment of items within MDBRow component. It distributes space between direct childrens | <MDBRow between ... /> |
bottom |
Boolean | |
Changes alignment of MDBRow whitin a container. MDBRow is placed at the end | <MDBRow bottom ... /> |
center |
Boolean | |
Changes alignment of items within MDBRow component. It puts direct childrens around the center | <MDBRow center ... /> |
className |
String | |
Adds custom classes | <MDBRow className="customClass" ... /> |
end |
Boolean | |
Changes alignment of items within MDBRow component. It puts direct childrens at the end | <MDBRow end ... /> |
middle |
Boolean | |
Changes alignment of MDBRow whitin a container. MDBRow is placed around the center | <MDBRow middle ... /> |
start |
Boolean | |
Changes alignment of items within MDBRow component. It puts direct childrens at the start | <MDBRow start ... /> |
tag |
String | div |
<MDBRow tag="div" ... /> |
|
top |
Boolean | |
Changes alignment of MDBRow whitin a container. MDBRow is placed at the start | <MDBRow top ... /> |
API Reference: MDBCol Properties
The table below shows the configuration options of the MDBCol component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
bottom |
Boolean | |
Changes alignment of MDBCol whitin a row. MDBCol is placed at the end | <MDBCol bottom ... /> |
className |
String | |
Adds custom classes | <MDBCol className="myClass" ... /> |
lg |
String | |
Gives n equal-width columns starting at larger desctops. | <MDBCol lg="4" ... /> |
md |
String | |
Gives n equal-width columns starting at medium devices and scaling to large desktops. | <MDBCol md="4" ... /> |
size |
String | |
Indicates the number of columns you’d like to use out of the possible 12 per row | <MDBCol size="4" ... /> |
sm |
String | |
Gives n equal-width columns starting at small devices and scaling to large desktops. | <MDBCol sm="4" ... /> |
middle |
Boolean | |
Changes alignment of MDBCol whitin a row. MDBCol is placed around the center | <MDBCol middle ... /> |
top |
Boolean | |
Changes alignment of MDBCol whitin a row. MDBCol is placed at the start | <MDBCol top ... /> |
xl |
String | |
Gives n equal-width columns starting at extra larg devices. | <MDBCol xl="4" ... /> |
xs |
String | |
Gives n equal-width columns starting at extra small devices and scaling to large desktops. | <MDBCol xs="4" ... /> |