How to useFlexbox Classes with React Bootstrap in React Bootstrap
Here we will create a responsive-friendly layout using the Flexbox classes of React Bootstrap. These classes include d-flex, flex-grow-1, and the column classes (col-md-6, col-lg-4), used to create the responsive layout. Using all these classes, we can easily adjust the width and stack the columns vertically on smaller screen-sized devices. The columns are displayed horizontally on the larger screen-sized devices.
Example: This example implements the above-mentioned approach.
Javascript
//App.js import React from "react"; import { Container } from "react-bootstrap"; const App = () => { return ( <Container> <h1 style={{ color: "green"}}> w3wiki </h1> <div className="d-flex flex-wrap"> <div className="flex-grow-1 col-md-6 col-lg-4 bg-primary p-4 text-center"> <h3 style={{ color: "blue"}}> Column 1 </h3> <p> w3wiki is a computer science portal.</p> </div> <div className="flex-grow-1 col-md-6 col-lg-4 bg-secondary p-4 text-center"> <h3 style={{ color: "green", }}> Column 2 </h3> <p> It provides coding tutorials and resources. </p> </div> <div className="flex-grow-1 col-md-6 col-lg-4 bg-danger p-4 text-center"> <h3 style={{ color: "red", }}> Column 3 </h3> <p> Learn programming and advance your skills.</p> </div> </div> </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
- Using Bootstrap Grid Classes
- Using Flexbox Classes with React Bootstrap