React Bootstrap — Form Grids, Sizing, and Inline Forms

Photo by Rayne Leach on Unsplash

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add forms to a React app with React Bootstrap.

Form Grid

We can add form controls to a grid to create more complex layouts.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Form>
        <Row>
          <Col>
            <Form.Control placeholder="First name" />
          </Col>
          <Col>
            <Form.Control placeholder="Last name" />
          </Col>
        </Row>
      </Form>
    </>
  );
}

to display the first name and last name inputs side by side.

Col has the columns.

Form Row

We can replace Row with Form.Row to display a row of form controls/

For example, we can write;

import React from "react";
import Form from "react-bootstrap/Form"…