Skip to content
Related Articles

Related Articles

Improve Article

React-Bootstrap Container, Row and Col Component

  • Last Updated : 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 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

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: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :