How to useBootstrap Grid Classes in React Bootstrap

Steps to create React App and install required modules:

Approach 2: Using Flexbox Classes with React Bootstrap

In this approach, we have created three columns with different content. Then we used React Bootstrap’s grid classes and responsive breakpoints like ‘xs’,’md’, and ‘lg’. This is mainly used to control the representation of data on various small-screen devices. On smaller screen-sized devices, we can see in the output that all the columns are aligned in a vertical stack manner. This makes the content user-friendly even on smaller screen-sized devices.

Example 1: This example implements the above-mentioned approach.

Javascript

//App.js 
import React from "react"; 
import { Container, Row, Col } from "react-bootstrap"; 
const App = () => { 
    return ( 
        <Container> 
            <h1 className="text-center"
                style={{ color: "green" }}> 
                w3wiki 
            </h1> 
            <Row> 
                <Col xs={12} md={6} lg={4}> 
                    <div className="bg-primary text-center p-4"> 
                        <h4> Column 1 </h4> 
                        <p> w3wiki is awesome!</p> 
                    </div> 
                </Col> 
                <Col xs={12} md={6} lg={4}> 
                    <div className="bg-secondary text-center p-4"> 
                        <h4> Column 2 </h4> 
                        <p>w3wiki is actually for geeks!</p> 
                    </div> 
                </Col> 
                <Col xs={12} md={12} lg={4}> 
                    <div className="bg-danger text-center p-4"> 
                        <h4> Column 3 </h4> 
                        <p> I will switch to vertical as the screen goes smaller!</p> 
                    </div> 
                </Col> 
            </Row> 
        </Container> 
    ); 
}; 
export default App;

Output:

How to make columns stack vertically on smaller screens in React Bootstrap?

In the article, we used different components like rows, columns, etc. to display and deliver the information to the user. However, on smaller screen devices, there is an issue with the representation of these components. So, to handle the columns on the smaller screens, we can use grid classes and FlexBox classes provided by React Bootstrap.

Table of Content