Learning React Bootstrap: Part 3: Common Components

On By Dan CoxIn Bootstrap, code, JavaScript

Learning React Bootstrap

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

Common Components

Along with its Container, Row, and Col components, React-Bootstrap also exposes many other common components such as Alert, Button, and Card.

<Alert>

Useful for exposing additional or situational information to a user, the <Alert> component can show content colored using one of the built-in values for its variant property.

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

function App() {
  return (
   <Container>
     <Row>
       <Col>
        <Alert variant='primary'>
          This is a primary alert example!
        </Alert>
       </Col>
     </Row>
   </Container>
  );
}

export default App;

<Button>

While access to the HTML element <button> is available for use, Bootstrap supplies the ability to color and create consistent theme support across a site. Like <Alert>, the <Button> component can also use the built-in color scheme via its own variant property.

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

function App() {
  return (
   <Container>
     <Row>
       <Col>
        <Button variant="primary">Primary</Button>
       </Col>
     </Row>
   </Container>
  );
}

export default App;

<Card>

The <Card> component is a container with its own Body and Title (among others) sub-components for arranging content.

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

function App() {
  return (
   <Container>
     <Row>
       <Col>
        <Card>
          <Card.Body>
            <Card.Title>Card Title</Card.Title>
            <Card.Text>
              Example text!
            </Card.Text>
          </Card.Body>
        </Card>
       </Col>
     </Row>
   </Container>
  );
}

export default App;