Learning React Bootstrap: Part 2: Grid System Components

Learning React Bootstrap

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.