Responsive grids
Using the Col component, you can designate column widths for six breakpoint sizes (xs, sm, md, lg, xl, and xxl). At each breakpoint, you have the option to define the number of columns to span. Alternatively, you can utilize the prop `<Col lg={true} />` for automatic layout widths.
- Multiple breakpoints can be added to create different grids depending on the screen size.
- The Col breakpoint props have the form prop form: {span: number, order: number, offset: number} for specifying offsets and ordering effects.
- Order property can be used to control the visual order of the content.
Example: Below is the code example of the Responsive grids:
Javascript
function Example5() { return ( <Container> <Row> <Col sm={8} className='bg-primary'> sm=8 </Col> <Col sm={4} className='bg-secondary'> sm=4 </Col> </Row> <Row> <Col sm className='bg-secondary'> sm=true </Col> <Col sm className='bg-warning'> sm=true </Col> <Col sm className='bg-primary'> sm=true </Col> <Col sm className='bg-secondary'> sm=true </Col> </Row> </Container> );}export default Example5; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
React Bootstrap Grid
React Bootstrap Grid is like the maestro of web page layouts in React Bootstrap. It’s your go-to buddy for crafting designs that look good and adapt seamlessly across devices. From straightforward single-column setups to intricate multi-column arrangements, this tool’s got the flexibility and power to make it happen.
There are two main approaches to implement React Bootstrap Grid:
Table of Content
- Using Grid component
- Using the Row and Col components
Contact Us