React JS

Using Bootstrap with React forms

Apps, React JS

Bootstrap is a front end open-source toolkit which makes it really easy to build responsive UIs quickly. With comprehensive documentation and a library of examples it’s a wise choice if you want to build a React app with a tidy front end quickly. In this post I’ll show you how to use Bootstrap in a React app, and specifically how to build and style a form.

You will already need to have Node and npm installed on your machine (if you need help doing that read this blog post). To build an app that has a working form in it using React and Bootstrap, follow these steps.

Create a React app

Navigate to where you want your code to be located in your folder structure using your preferred command line tool, and create your React app in the normal way (I’m presuming that you already have a basic understanding of creating and editing a React app).

npx create-react-app react-bootstrap-forms

Install the React Bootstrap package in your React app

The best way to use Bootstrap in a React app is to use the npm package React Bootstrap. On the command line type:

npm install react-bootstrap bootstrap

Then type npm start and make sure the app runs ok in the browser – you should see the default React app template screen.

Start editing the React code

Now open App.js and replace the contents of the whole file with this code:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

import Button from "react-bootstrap/Button";

import "./App.css";

function App() {
  const [message, setMessage] = useState("");

  return (
    <div className="App">
      <header className="App-header">
        <p>
          React Bootstrap <code>Form Examples</code>.
        </p>
      </header>
      <p>We will build a form here....</p>
      <Button onClick={() => setMessage("You clicked the button")}>
        Click Me
      </Button>
      <p>{message}</p>
    </div>
  );
}

export default App;

And open App.css, find .App-header and change the min-height value from 100vh to 20vh.

And now on your command line, run your app:

npm start

… and you should see this:

using react bootstrap with React for forms
Try clicking the button

… after you click the button you’ll see a message appear. So this is using a Bootstrap button, along with some of the basic styles that are set up with the React app. You can do away with those (App.css) altogether if you want, or use them side by side.

Add more Bootstrap components to the form

Adding a few more Bootstrap elements into the mix (Container and Jumbotron) and you can see we start to build up a nicely styled form, with a couple of Text Inputs and some layout detail using Rows and Columns. You can find all the information you need about them here.

Now replace the contents of App.js with this code:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import Jumbotron from "react-bootstrap/Jumbotron";
import Form from "react-bootstrap/Form";
import Alert from "react-bootstrap/Alert";

import "./App.css";

function App() {
  const [showMessage, setShowMessage] = useState(false);

  return (
    <div className="App">
      <header className="App-header">
        <p>
          React Bootstrap <code>Form Example</code>.
        </p>
      </header>
      <Container className="p-3">
        <Container>
          <Row>
            <Col>
              <Alert show={showMessage} variant="success">
                <Alert.Heading>Success</Alert.Heading>
                <p>
                  This is an alert, and these can be shown in a variety of
                  styles provided by Bootstrap. Our form submit button simply
                  shows this alert. Another post will go through form validation
                  and errors.
                </p>
                <hr />
                <div className="d-flex justify-content-end">
                  <Button
                    onClick={() => setShowMessage(false)}
                    variant="outline-success"
                  >
                    Close this alert
                  </Button>
                </div>
              </Alert>
            </Col>
          </Row>
          <Row>
            <Col>
              <Jumbotron>
                <h1 className="header">Our form</h1>
                <p>
                  We will build a form here. You may want to use this are as
                  login instructions, or some kind of product intro.
                </p>
                <p>
                  This is a h1 tag and paragraph in a Jumbotron, which is the
                  first column in a row of two columns.
                </p>
                <p>
                  Here is a selection of buttons showing some of the different
                  styles available from Bootstrap. You can&nbsp;
                  <a href="https://react-bootstrap.github.io/components/buttons/">
                    read more here
                  </a>
                  .
                </p>
                <hr />
                <Button variant="outline-primary">Primary</Button>{" "}
                <Button variant="outline-secondary">Secondary</Button>{" "}
                <Button variant="outline-success">Success</Button>{" "}
                <Button variant="danger">Danger</Button>{" "}
                <Button variant="info">Info</Button>{" "}
              </Jumbotron>
            </Col>
            <Col>
              <Form>
                <Form.Row>
                  <Form.Group as={Col} controlId="formGridEmail">
                    <Form.Label>Email</Form.Label>
                    <Form.Control type="email" placeholder="Enter email" />
                  </Form.Group>

                  <Form.Group as={Col} controlId="formGridPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password" />
                  </Form.Group>
                </Form.Row>
                <Form.Group controlId="formGridAddress1">
                  <Form.Label>Address</Form.Label>
                  <Form.Control placeholder="Street Name" />
                </Form.Group>
                <Form.Group controlId="formGridAddress2">
                  <Form.Label>Address 2</Form.Label>
                  <Form.Control placeholder="Apartment, studio, or floor" />
                </Form.Group>
                <Form.Row>
                  <Form.Group as={Col} controlId="formGridCity">
                    <Form.Label>City</Form.Label>
                    <Form.Control />
                  </Form.Group>

                  <Form.Group as={Col} controlId="formGridState">
                    <Form.Label>State</Form.Label>
                    <Form.Control as="select" defaultValue="Choose...">
                      <option>Choose...</option>
                      <option>...</option>
                    </Form.Control>
                  </Form.Group>

                  <Form.Group as={Col} controlId="formGridZip">
                    <Form.Label>Zip</Form.Label>
                    <Form.Control />
                  </Form.Group>
                </Form.Row>
                <Form.Group id="formGridCheckbox">
                  <Form.Check type="checkbox" label="Check me out" />
                </Form.Group>
                <Button
                  variant="primary"
                  size="lg"
                  onClick={() => setShowMessage(true)}
                >
                  Submit
                </Button>
              </Form>
            </Col>
          </Row>
        </Container>
      </Container>
    </div>
  );
}

export default App;

…. and when you save your file you should see this in your browser:

a react bootstrap form example

So you have built a form using React Bootstrap, including different styles of buttons, a text input, a dropdown menu, and an alert message that you can dismiss. I’ll cover how to handle the form submission and form errors in my next post.