Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like 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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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