Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Basic Structure

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.

Preview

Jsx

1 of 3

2 of 3

3 of 3

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';

function BasicGrid() {
  return (
    <Container>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  );
}

export default BasicGrid;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Grid System

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	XS <576px	SM ≥576px	MD ≥768px	LG ≥992px	XL ≥1200px	XXL ≥1400px
Max container width	None (auto)	540px	720px	960px	1140px	1320px
Component/props	`Col`	`sm`	`md`	`lg`	`xl`	`xxl`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Nestable	Yes
Column ordering	Yes

Tips: Bootstrap v5 added one more grid breakpoint class xxl for ≥1400 breakpoint.

Mix and match

Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

Preview

Jsx

xs=12 md=8

xs=6 md=4

xs=12 md=8

xs=6 md=4

xs=6

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';

function MixMatch() {
  return (
    <Container className="py-3">
        <Row className="mb-3">
            <Col xs={12} md={8} className="border bg-grey-light-5">
                <div className="p-2">xs=12 md=8</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
        </Row>
        <Row className="mb-3">
            <Col xs={12} md={8} className="border bg-grey-light-5">
                <div className="p-2">xs=12 md=8</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
        </Row>
        <Row className="mb-3">
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
        </Row>
        <Row>
            <Col xs={6} className="border bg-grey-light-5">
                <div className="p-2">xs=6</div>
            </Col>
            <Col xs={6} className="border bg-grey-light-5">
                <div className="p-2">xs=6</div>
            </Col>
        </Row>
    </Container>
  );
}

export default MixMatch;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Gutters

Gutters are the gaps between column content, created by horizontal padding and vertical margin. bootstrap set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.Gutters start at 1.5rem (24px) wide.

Preview

Jsx

Classes

One of three columns

One of two columns

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';

function Gutters() {
  return (
    <Container>
        <Row className="gx-5 mb-3">
            <Col>
                <div className="border bg-grey-light-5 p-2">One of three columns</div>
            </Col>
            <Col>
                <div className="border bg-grey-light-5 p-2">One of three columns</div>
            </Col>
            <Col>
                <div className="border bg-grey-light-5 p-2">One of three columns</div>
            </Col>
        </Row>
        <Row className="gx-3">
            <Col>
                <div className="border bg-grey-light-5 p-2">One of two columns</div>
            </Col>
            <Col>
                <div className="border bg-grey-light-5 p-2">One of two columns</div>
            </Col>
        </Row>
    </Container>
  );
}

export default Gutters;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

ClassNames	Values
`className="g-/gy-/gx-[Value]"`	1/2/3/4/5

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Reordering

The Col breakpoint props also have a more complicated object prop form: {span: number, order: number, offset: number} for specifying offsets and ordering effects.

You can use the order property to control the visual order of your content.

Preview

Jsx

First, but unordered

Second, but last

Third, but second

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';

const Reordering = () => {
  return (
    <Container>
      <Row>
        <Col xs className="border bg-grey-light-5">
            <div className="p-2">First, but unordered</div>
        </Col>
        <Col xs={{ order: 2 }} className="border bg-grey-light-5">
            <div className="p-2">Second, but last</div>
        </Col>
        <Col xs={{ order: 1 }} className="border bg-grey-light-5">
            <div className="p-2">Third, but second</div>
        </Col>
      </Row>
    </Container>
  );
}

export default Reordering;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Column widths in Row

The Row lets you specify column widths across 6 breakpoint sizes (xs, sm, md, lg, xl and xxl). For every breakpoint, you can specify the amount of columns that will fit next to each other. You can also specify auto to set the columns to their natural widths.

Preview

Jsx

Five

Seven

Nine

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';

const RowColumns = () => {
  return (
 <Container>
     <Row xl={5} className="mb-3" >
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
     </Row>
     <Row xl={7} className="mb-3" >
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
     </Row>
     <Row xl={9} className="mb-3" >
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
     </Row>
 </Container>
  );
}

export default RowColumns;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.