Setting one column width

Flexbox grid columns with auto-layout enable you to define the width of a single column, leading to automatic resizing of adjacent columns. This can be achieved using predefined grid classes, grid mixins, or inline widths. Importantly, the width of the center column influences the resizing of the surrounding columns.

Example: Below is the code example of the Setting one column width:

Javascript

function Example2() {
    return (
        <Container>
            <Row>
                <Col className='bg-primary'>
                    1 of 3
                </Col>
                <Col xs={6}
                    className='bg-secondary'>
                    2 of 3 (wider)
                </Col>
                <Col>3 of 3</Col>
            </Row>
            <Row>
                <Col className=''>
                    1 of 3
                </Col>
                <Col xs={5}
                    className='bg-primary'>
                    2 of 3 (wider)
                </Col>
                <Col
                    className='bg-warning'>
                    3 of 3
                </Col>
            </Row>
        </Container>
    );
}
 
export default Example2;

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

Setting one column width

Javascript

React Bootstrap Grid

Similar Reads

Contact Us