React-Bootstrap Container, Row and Col Component

18 May, 2021
React-Bootstrap is a front-end framework that was designed keeping react in mind. We can use the following approach in ReactJS to use the react-bootstrap Container, Row, Col Component.
Container Component provides a way to center and horizontally pad the contents of our application. It is used when the user wants the responsive pixel width. 
Row Component provides a way to represent a row in the grid system. It is used when we want to display data in the form of rows.
Col Component provides a way to represent a column in the grid system. It is used when we want to display data in the form of columns
Container Props:
as: It can be used as a custom element type for this component.
fluid: It is used to allow the container to fill all of its horizontal space which is available.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Row Props:
as: It can be used as a custom element type for this component.
lg: It is used to denote the number of columns which will fit next to each other on large devices having resolution ≥ 992 pixels.
md: It is used to denote the number of columns which will fit next to each other on medium devices having resolution ≥ 768 pixels.
sm: It is used to denote the number of columns which will fit next to each other on small devices having resolution ≥ 576 pixels.
xl: It is used to denote the number of columns which will fit next to each other on extra-large devices having resolution ≥ 1200 pixels.
xs: It is used to denote the number of columns which will fit next to each other on extra-small devices having resolution < 576 pixels.
noGutters: It is used to remove the gutter spacing between added negative margins and columns.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Col Props:
as: It can be used as a custom element type for this component.
lg: It is used to denote the number of columns to span on large devices having resolution ≥ 992 pixels.
md: It is used to denote the number of columns to span on medium devices having resolution ≥ 768 pixels.
sm: It is used to denote the number of columns to span on small devices having resolution ≥ 576 pixels.
xl: It is used to denote the number of columns to span on extra-large devices having resolution ≥ 1200 pixels.
xs: It is used to denote the number of columns to span on extra-small devices having resolution < 576 pixels.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
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 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 react-bootstrap 
npm install bootstrap
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-bootstrap 
npm install bootstrap
Project Structure: It will look like the following.
Project Structure
Container Component Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react';import 'bootstrap/dist/css/bootstrap.css';import Container from 'react-bootstrap/Container';  export default function App() {  return (    <div style={{ display: 'block',                  width: 700, padding: 30 }}>      <h4>React-Bootstrap Container Component</h4>      <Container        style={{          backgroundColor: 'green'        }}      >        <h3>Sample Text, Greetings from GeeksforGeeks</h3>      </Container>    </div>  );}
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:
Row Component Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react';import 'bootstrap/dist/css/bootstrap.css';import Row from 'react-bootstrap/Row';  export default function App() {  return (    <div style={{ display: 'block',                   width: 700, padding: 30 }}>      <h4>React-Bootstrap Row Component</h4>      <Row style={{        backgroundColor: 'red',      }}>        Sample First Row      </Row>      <Row style={{        backgroundColor: 'yellow',      }}>        Sample Second Row      </Row>      <Row style={{        backgroundColor: 'green',      }}>        Sample Third Row      </Row>    </div>  );}
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: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react';import 'bootstrap/dist/css/bootstrap.css';import Col from 'react-bootstrap/Col';import Row from 'react-bootstrap/Row';  export default function App() {  return (    <div style={{ display: 'block', width: 700, padding: 30 }}>      <h4>React-Bootstrap Col Component</h4>      <Row>        <Col style={{          backgroundColor: 'red',        }}>          Sample First Col      </Col>        <Col style={{          backgroundColor: 'yellow',        }}>          Sample Second Col      </Col>        <Col style={{          backgroundColor: 'green',        }}>          Sample Third Col      </Col>      </Row>    </div>  );}
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:
Reference: 
https://react-bootstrap.github.io/layout/grid/#container-props
https://react-bootstrap.github.io/layout/grid/#row-props
https://react-bootstrap.github.io/layout/grid/#col-props
React-Bootstrap
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
JavaScript | Promises
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS Functional Components