Variable width content
You can set the column value to auto to size columns based on the natural width of their content.
Example: Below is the code example of the Variable width content:
Javascript
import Container from 'react-bootstrap/Container' ; import Row from 'react-bootstrap/Row' ; import Col from 'react-bootstrap/Col' ; function Example3() { return ( <Container> <Row className= "justify-content-md-center" > <Col xs lg= "2" className= 'bg-primary' > 1 of 3 </Col> <Col md= "auto" className= 'bg-warning' > 2 of 3 (variable content) Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam eaque ex iure odio illo sed, praesentium delectus qui ducimus unde doloremque temporibus deleniti accusantium ratione esse dicta illum recusandae nemo? </Col> <Col xs lg= "2" className= 'bg-secondary' > 3 of 3 </Col> </Row> </Container> ); } export default Example3; |
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