React Bootstrap online editor

Write, Run & Share React Bootstrap code online using OneCompiler's React Bootstrap online editor for free. It's one of the robust, feature-rich online editors for React Bootstrap. Getting started with the OneCompiler's React Bootstrap online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'React Bootstrap' and start writing code to learn and test online without worrying about tedious process of installation.

About React Bootstrap

React Bootstrap rebuilds the Bootstrap components as real React components, so there's no jQuery and no Bootstrap JavaScript to wire up. You import the components you need and control them with props and state, while Bootstrap's stylesheet handles the look. Import the CSS once and the familiar Bootstrap classes come along with it.

Syntax help

Setup

Import Bootstrap's stylesheet at the top of your app, then import components from react-bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Card } from 'react-bootstrap';

Buttons

Button uses Bootstrap's variant names for color, and size for scale. Outline variants prefix the color with outline-.

import { Button } from 'react-bootstrap';

<Button variant="primary">Primary</Button>
<Button variant="outline-secondary">Outline</Button>
<Button variant="danger" size="sm">Delete</Button>

Grid layout

Container, Row, and Col give you Bootstrap's twelve-column grid. Columns size themselves per breakpoint, so md={6} means half width from the medium breakpoint up.

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

<Container>
  <Row>
    <Col md={6}>Left half</Col>
    <Col md={6}>Right half</Col>
  </Row>
</Container>

Cards

Card and its sub-components (Card.Body, Card.Title, Card.Text) compose a content block.

import { Card, Button } from 'react-bootstrap';

<Card style={{ width: '20rem' }}>
  <Card.Body>
    <Card.Title>Plan</Card.Title>
    <Card.Text>A short description of the plan.</Card.Text>
    <Button variant="primary">Choose</Button>
  </Card.Body>
</Card>

Forms

Form and Form.Control render inputs with Bootstrap styling. Group a label and field with Form.Group.

import { Form, Button } from 'react-bootstrap';

<Form>
  <Form.Group className="mb-3">
    <Form.Label>Email</Form.Label>
    <Form.Control type="email" placeholder="[email protected]" />
  </Form.Group>
  <Button type="submit">Sign in</Button>
</Form>

Modals

Modal shows and hides based on a show prop, so you keep its state in React and toggle it from a button.

import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';

function Demo() {
  const [show, setShow] = useState(false);
  return (
    <>
      <Button onClick={() => setShow(true)}>Open</Button>
      <Modal show={show} onHide={() => setShow(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Heads up</Modal.Title>
        </Modal.Header>
        <Modal.Body>Modal content goes here.</Modal.Body>
      </Modal>
    </>
  );
}