Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The Layout component is used for organizing the layout of our application content using Row, Column, and Container Component.
The Row component provides a way to represent a row in the grid system. The Col component provides a way to represent a column in the grid system. The container component provides a way to center and horizontally pad the contents of our application. We can use the following approach in ReactJS to use the ReactJS Reactstrap Layout Component.
Container Props:
- fluid: If bool then it applies. Container-fluid class and if string, then it applies .container-{breakpoint} class.
- component: This component is used for the root node. This prop is a way to use Html with strings. This takes the default value as ‘div’ and type is the element type.
- fixed: The fixed props are used to set the maximum width and minimum width of the screen. The main use of these props is to set the viewport. The default value is false and the type is bool.
- maxWidth:maxWidth props are used to set the maximum width in the viewport. The type of the maxWidth is xs, ls, md , false and the default value is lg .
Row Props:
- noGutters: It is used to remove the gutter spacing between added negative margins and columns.
- form: It is used to form a grid with a form row.
- xs: It is used to denote the number of columns which will fit next to each other on extra-small devices having a resolution of < 576 pixels.
- sm: It is used to denote the number of columns that will fit next to each other on small devices having a resolution of 576 pixels.
- md: It is used to denote the number of columns that will fit next to each other on medium devices having a resolution of 768 pixels.
- lg: It is used to denote the number of columns that will fit next to each other on large devices having a resolution ≥ of 992 pixels.
- xl: It is used to denote the number of columns that will fit next to each other on extra-large devices having a resolution ≥ of 1200 pixels.
Col Props:
- xs: It is used to denote the number of columns to span on extra-small devices having resolution < 576 pixels.
- sm: It is used to denote the number of columns to span on small devices having a resolution of 576 pixels.
- md: It is used to denote the number of columns to span on medium devices having a resolution of ≥ 768 pixels.
- lg: It is used to denote the number of columns to span on large devices having a resolution ≥ of 992 pixels.
- xl: It is used to denote the number of columns to span on extra-large devices having a resolution ≥ of 1200 pixels.
- width: It is used to denote the width of the component in pixels.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, install the required module using the following command:
npm install reactstrap bootstrap
Project Structure: It will look like the following.
Project Structure
Example 1: To show a single column in each row component.
Javascript
import React from "react"; import "bootstrap/dist/css/bootstrap.min.css"; import { Container, Row, Col } from "reactstrap"; function App() { return ( <div style={{ display: "block", width: 900, padding: 30 }} > <h4>ReactJS Reactstrap Layout Component</h4> <Container> <Row> <Col>Java</Col> <Col>Python</Col> <Col>Html</Col> <Col>CSS</Col> </Row> </Container> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Output
Example 2: To show multiple columns in each row component.
Javascript
import React from 'react'import 'bootstrap/dist/css/bootstrap.min.css'; import { Container, Row, Col } from "reactstrap" function App() { return ( <div style={{ display: 'block', width: 900, padding: 30 }}> <h4>ReactJS Reactstrap Layout Component</h4> <Container> <Row className="bg-success"> <Col xs="3">Column with .col-3 Size</Col> <Col xs="auto">.Column with col-auto Size</Col> <Col xs="3">Column with .col-3 Size</Col> </Row> <Row className="bg-secondary"> <Col xs="6">Column with .col-6 Size</Col> <Col xs="6">Column with .col-6 Size</Col> </Row> <Row className="bg-success"> <Col xs="6" sm="4">Column with .col-6 .col-sm-4 Size</Col> <Col xs="6" sm="4">Column with .col-6 .col-sm-4 Size</Col> <Col sm="4"> Column with .col-sm-4 Size</Col> </Row> </Container> </div > ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 3:
App.js
import React from "react"; import "bootstrap/dist/css/bootstrap.min.css"; import { Container, Row, Col } from "reactstrap"; function App() { return ( <div style={{ width: 9000, padding: 10 }} > <h4> Reactstrap Layout Component</h4> <Container> <Row className="bg-danger"> <Col xs="3">Column with .col-3 Size</Col> <Col xs="auto">.Column with col-auto Size</Col> <Col xs="3">Column with .col-3 Size</Col> </Row> <Row className="bg-primary"> <Col xs="6">Column with .col-6 Size</Col> <Col xs="6">Column with .col-6 Size</Col> </Row> <Row className="bg-secondary"> <Col xs="6" sm="4"> Column with .col-6 .col-sm-4 Size </Col> <Col xs="6" sm="4"> Column with .col-6 .col-sm-4 Size </Col> <Col sm="4"> Column with .col-sm-4 Size</Col> </Row> </Container> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
