Setting column widths in Row
The Row component allows you to define column widths for six breakpoint sizes (xs, sm, md, lg, xl, and xxl). At each breakpoint, you can specify the number of columns that will be placed adjacent to each other. Additionally, you have the option to set the columns to their natural widths by using the “auto” value. It’s important to note that Row column widths will take precedence over Col widths set at lower breakpoints when viewed on larger screens. For example, the size specified by `<Col xs={6} />` will be overridden by `<Row md={4} />` on medium and larger screens.
Example: Below is the code example of the setting column widths in row:
Javascript
import Container from 'react-bootstrap/Container' ; import Row from 'react-bootstrap/Row' ; import Col from 'react-bootstrap/Col' ; function Example4() { return ( <Container> <Row xs={2} md={4} lg={6}> <Col className= 'bg-warning' > 1 of 2 </Col> <Col> 2 of 2 </Col> </Row> <Row xs={1} md={2}> <Col className= 'bg-primary' > 1 of 3 </Col> <Col className= 'bg-warning' > 2 of 3 </Col> <Col className= 'bg-secondary' > 3 of 3 </Col> </Row> <Row xs= "auto" > <Col className= 'bg-warning' > 1 of 3 </Col> <Col className= 'bg-secondary' > 2 of 3 </Col> <Col className= 'bg-primary' > 3 of 3 </Col> </Row> </Container> ); } export default Example4; |
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