Learning React Bootstrap

• Part 1: Installing and Configuring
• Part 2: Grid System Components
• Part 3: Common Components
• Part 4: Reacting to Events

React Bootstrap is a redesign of the popular Bootstrap front-end framework for use in React projects.

Grid System Components

While normally providing multiple user-interface classes in Bootstrap, these are converted into components in React-Bootstrap. Notably, the classes “container“, “row” and “col-*” are components.

import React from 'react';
import {Container, Row, Col} from 'react-bootstrap';

function App() {
  return (
   <Container>
     <Row>
       <Col>Row 1, Column 1</Col>
       <Col>Row 1, Column 2</Col>
       <Col>Row 1, Column 3</Col>
     </Row>
     <Row>
       <Col>Row 2, Column 1</Col>
       <Col>Row 2, Column 2</Col>
       <Col>Row 2, Column 3</Col>
     </Row>
   </Container>
  );
}

export default App;

In React-Bootstrap, the components of Container, Row, and Col compose the backbone of its grid system. These define how elements are organized within the row-column arrangement.

In React-Bootstrap, each Row defines a horizontal section within a page. Within a row are individual Col components; these define vertical slices within the horizontal space.

Each additional Col component also takes up an equal amount of the remaining space within the horizontal space of a Row. Specific sizes can also be set using its properties and using its responsive grid system.