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 new React app
- Install Bootstrap using React Bootstrap
- Start editing the React code
- Add more Bootstrap components to make a whole form
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:
… 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
<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:
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.