Grid System & Containers In React-Bootstrap Library

Containers & Grid System With React-Bootstrap

Grid System With Rows And Columns

CONTAINERS IN REACT-BOOTSTRAP

• React-Bootstrap requires a containing element to wrap site contents.
• Containers are used to GATHER the content inside of them, and there are two containers available:

1. container
2. container-fluid

• The container provides a responsive fixed width container
• The container-fluid provides a full width container, spanning the entire width of the viewport.
• NOTE: By default, containers have left and right padding, with no top or bottom padding.

Grid Classes In React-Bootstrap

• xs
• sm
• md
• lg
• xl
• xxl

BOOTSTRAP FRAMEWORK

FRAMEWORK CONTAINS 2 THINGS.

1.SET OF RULES

2.BUILT-IN LIBRARY

GRID SYSTEM IN REACT-BOOTSTRAP

• Each row allows up to 12 columns across the page.
• The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
• Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns)

To Do

• Containers
• Rows And Columns
• Container Fluid Breakpoints
• Specify width of columns
• Multiple Breakpoints in a single column container
• Offset and span

Source Code

GridBS.js File Code

import React from 'react'
import { Container, Row, Col, Button } from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

function GridBS() {
    return (

        <Container fluid='lg'>

            <Row md={4}>
                <Col>
                    <div className='bg-primary p-4'>
                        MY DIV
                    </div>
                </Col>
                <Col>
                    <div className='bg-primary p-4'>
                        MY DIV
                    </div>
                </Col>
                {/* <Col md={{ offset: 2, span: 6 }}>
                    <div className='bg-primary p-4'>
                        MY DIV
                    </div>
                </Col> */}
                {/* <Col md={{ span:6 }}>
                    <div className='bg-primary p-4'>
                        MY DIV
                    </div>
                </Col> */}
                {/* <Col md={{ offset:4 }}>
                    <div className='bg-primary p-4'>
                        MY DIV
                    </div>
                </Col> */}
                <Col>
                    <div className='bg-danger p-4'>
                        MY DIV
                    </div>
                </Col>
                <Col>
                    <div className='bg-success p-4'>
                        MY DIV
                    </div>
                </Col>
            </Row>

            {/* <Row>
                <Col md={8} sm={6}>
                    <div className='bg-primary p-4'>
                        MY DIV
                    </div>
                </Col>
                <Col>
                    <div className='bg-danger p-4'>
                        MY DIV
                    </div>
                </Col>
                <Col>
                    <div className='bg-success p-4'>
                        MY DIV
                    </div>
                </Col>
            </Row> */}

            {/* <Row>
            <Col sm={6}>
                <div className='bg-primary p-4'>
                    MY DIV
                </div>
            </Col>
            <Col sm={4}>
                <div className='bg-danger p-4'>
                    MY DIV
                </div>
            </Col>
            <Col>
                <div className='bg-success p-4'>
                    MY DIV
                </div>
            </Col>
        </Row> */}
            {/* <br/> */}
            {/* <Row className='mt-3'>
            <Col>
                <div className='bg-primary p-4'>
                    MY DIV
                </div>
            </Col>
            <Col>
                <div className='bg-danger p-4'>
                    MY DIV
                </div>
            </Col>
            <Col>
                <div className='bg-success p-4'>
                    MY DIV
                </div>
            </Col>
            <Col>
                <div className='bg-secondary p-4'>
                    MY DIV
                </div>
            </Col>
        </Row> */}

        </Container>

        // <div>
        //   <Button variant='outline-danger'>Submit</Button>
        //   <Button variant='outline-success'>Submit</Button>
        //   <Button variant='outline-dark'>Submit</Button>
        //   <Button variant='outline-warning'>Submit</Button>
        //   <Button variant='outline-secondary'>Submit</Button>
        // </div>
    )
}

export default GridBS

Download Notes Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/sdjuaf5wapdak0c/76+-+Containers+React-Bootstrap.pptx/file

Download Source Code Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/l00a453r1rcopni/new-app3.rar/file