How To: Create A Form in React Using Bootstrap

Today we will be exploring form building in React using React Bootstrap.

This will be a simple tutorial of a simple form as to dedicate the purpose of this blog to the basics of form building and the fundamentals of React.

✨✨Let's get started!✨✨

Outline

Please be advised that I already have a generated React application. If you do not have a React app yet, please search 'npx create-react-app' on how to get started.

Below ⬇️ we will go through the general plan or outline of form building using React Bootstrap.

1. Install node package React Bootstrap.
2. Create a React component file called 'Form.js'.
3. Build out your React Form component structure (either functional, class or ES6 arrow function component; your choice!)
4. Import 'bootstrap/dist/css/bootstrap.min.css' in the React component file.
5. Build out a basic form using JSX in the return statement in your Form component. Plan out input fields, labels, buttons ... etc.
6. Import necessary Bootstrap components; most importantly, 'Form', 'Button' ... etc.
7. Replace JSX elements with React Bootstrap components.
8. Make sure to given elements class names, types, names, or ids.
9. Continuously look to your browser to see live changes + updates; use CSS to further customize form style + elements.

Now that we have a rough plan, let's build this out together. Come follow along ✨✨

STEP 1

In order to install our node package 'react-bootstrap', we need to go to the command line of our terminal.

There, type and enter:

 install react-bootstrap@next bootstrap@5.1.0

Wait for the terminal to compile + finish loading. Once installed, you should be able to see the node package in your package.json file of your frontend React application.

STEP 2

Let's now create a React component called "Form". From either your terminal or in your code editor, create a new file and name it "Form.js".

It should look something like this:

STEP 3

I used ES6's arrow function structure to build out the basic structure of my React component "Form". Please use whatever type of component you prefer and you are comfortable with! This is just my preference. However, always remember to match the component's name to the file name and import 'React' at the top of the file!

STEP 4

Since Bootstrap is a styling utility that works alongside React, we must import a react-bootstrap stylesheet in our component. It is required to use the components given by our node package react-bootstrap.

Use this line at the top of your component:

 'bootstrap/dist/css/bootstrap.min.css'

Our file should now look like this:

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'

export const Form = () => {
    return (
        <div>

        </div>
    )
}

STEP 5

Let's now build out simple form structure using our knowledge from React and our knowledge of HTML elements. We will nest our form element in a div and give the div a class name of 'form-container'.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'

export const Form = () => {
    return (
        <div className="form-container">
            <form className="signup-form">

            </form>
        </div>
    )
}

Also, we will give the form element itself a class name. This is important for reference + organization. Complex applications will have many elements, components, forms ... let's stay organized!

Let's add some input elements. For simplicity's sake, we will do a 'name' input and 'email' input. We will also add a 'submit' button element.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'

export const Form = () => {
    return (
        <div className="form-container">
            <form className="signup-form">
                <input className="name-input" type="text" placeholder="name" name="name"/>
                <input className="email-input" type="text" placeholder="email" name="email" />
                <button className="submit-button" value="submit" type="submit">submit</button>
            </form>
        </div>
    )
}

Yes, this is a simple, imperfect form. But simplicity helps to learn new ideas, right?

STEP 6

Since React-Bootstrap is a node package, we have to import utilities or built-in functionalities at the top of our component to use them. For our example, we will be using 'Form' + 'Button'.

So, let's add this line to the top:

 { Form, Button } from 'react-bootstrap'

To see other built-in form elements, components + utilities, click here.

STEP 7

Now, we will replace our regular run-of-the-mill HTML form elements with our React-Bootstrap elements: 'Form' + 'Button'.

Our code should look like this:

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import { Form, Button } from 'react-bootstrap'

export const Form = () => {
    return (
        <div className="form-container">
            <Form className="signup-form">
                <input className="name-input" type="text" placeholder="name" name="name"/>
                <input className="email-input" type="text" placeholder="email" name="email" />
                <Button className="submit-button" value="submit" type="submit">submit</Button>
            </Form>
        </div>
    )
}

However, the input form elements are a little different. You may guess that we just change 'input' to 'Input', but this is not correct. We are going to replace 'input' with 'Form.Control' and nest all buttons + input elements under 'Form.Group'. This supplies hierarchical structure, organization + some cool functionality from Bootstrap.

import React from 'react'

import 'bootstrap/dist/css/bootstrap.min.css'

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

export const Form = () => {

    return (

        <div className="form-container">

            <Form className="signup-form">

                <Form.Group>

                    <Form.Control className="name-input" type="text" placeholder="name" name="name"></Form.Control>

                    <Form.Control className="email-input" type="text" placeholder="email" name="email" ></Form.Control>

                    <Button className="submit-button" value="submit" type="submit">submit</Button>

                </Form.Group>

            </Form>

        </div>

    )

}

STEP 8

Make sure to give all divs, spans, form elements, buttons,... etc. attributes (such as className or id) to be referenced by or considered. This is a major part of keeping a DRY and clear application. We want others to be able to understand what a specific button is for, for example.

STEP 9

With any structural building within an application, you should consistently look to the browser to see how modifications to your code reflect in the browser. Please be patient. Try new things. Don't give up. I know it's frustrating when a small change in code causes a hurricane in the browser. We have all been there. Keep your eye on your browser

Here is what your browser should look like:

It's rough, yes. But it's a start. Keep going + add your own flair.

✨✨✨✨✨✨

Summary + RECAP

While this may be an oversimplified explanation of creating a React form using Bootstrap, I find it necessary to indulge in. Everyone has a starting point to their education and career in tech, so why not help?

🌞Feel free to comment below!
🌞Feedback + questions are welcome.
🌞As always, let's learn together<3