Auto-layout columns
If column widths are not explicitly defined, the Col component will display columns of equal width.
Example: Below is the code example of the Auto-layout columns:
Javascript
import Container from 'react-bootstrap/Container' ; import Row from 'react-bootstrap/Row' ; import Col from 'react-bootstrap/Col' ; function Example1() { return ( <Container> <Row> <Col className= 'bg-success' > 1 of 2 </Col> <Col className= 'bg-warning' > 2 of 2 </Col> </Row> <Row> <Col className= 'bg-warning' > 1 of 3 </Col> <Col className= 'bg-success' > 2 of 3 </Col> <Col className= 'bg-warning' > 3 of 3 </Col> </Row> </Container> ); } export default Example1; |
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