React Bootstrap Grid System

React Bootstrap's Grid system is similar to the traditional Bootstrap Grid system. It contains a series of containers, rows, and columns, to provide a layout and design and align content. The React Bootstrap Grid is built with CSS flexbox and is fully responsive.

Let's understand different components of the React Bootstrap Grid system:

Containers

Containers provides a fixed width to the content of the web page. They are meant to be center and horizontally pad your sites main content. The containers are used for a responsive pixel width. Consider the below example of the container:

App.js:

Output:

Container Fluid

The container fluid uses 100% width across all the devices and viewports.

Consider the below example:

App.js:

Output:

We can also specify the breakpoints such as sm, md, lg, xl, and xxl for the fluid prop. It will set the container as width 100% until the specified breakpoint.

Consider the below example:

It will set the container width 100% only for medium size devices.

Columns

The columns will specify how many columns will be created for a row. The Bootstrap Grid is divided into 12 columns for maximum width. If we specify col-md-3 then it will specify the 4^th of the total of the available width. Let's understand different column width.

Auto Width:

When no column is specified the <Col></Col> component specifies the equal width columns for the available width. Consider the below example:

App.js:

Output:

Specifying Column Width:

We can specify the column width for one of the columns having sibling columns. It will automatically resize the column width as per the specified props.

Consider the below example:

Output:

Specifying Column Width for Multiple Breakpoints:

We can specify the column width for the multiple breakpoints means how much width a column will take on a specific devices. It will automatically convert the column width as per the specified value:

Consider the below example:

From the above example, all the specified column widths will automatically be taken when the page is scaled to the specific device.

Responsive Grids

The <Col></Col> component specifies the width across the six breakpoints, which are xs, sm, md, lg, xl, and xxl. For every column, we can specify the amount of the column for a single row. To provide the auto layout, we can set the prop value as {true}.

Consider the below example:

We can also combine two breakpoints to create different grids based on the screen size. Consider the below example:

Column Order:

The Col breakpoints props have more options than specifying the column width. We can also specify the order and offset for applying the offset and ordering effects.

The order property is used to control the visual order of the content.

Consider the below example:

App.js:

Output:

Setting Column Widths in Row

We can also specify the column width in the row for different breakpoints. For every breakpoint, including all six(xs, sm, md, lg, xl, and xxl), we can specify the column width that will fit on the specific device.

We can also use the auto prop to automatically fit all the columns to their natural width.

Consider the below example:

From the above example, it will fit all the columns as per the specified width on every breakpoint.

Note: The Row column widths will be overridden by Col widths set on lower breakpoints when viewed on larger screens. For example, the <Col xs={5} /> size will override the <Row md={3} /> on medium and larger screens.