React Bootstrap — Form Grids, Sizing, and Inline Forms

Image for post
Image for post
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:

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;

and get the same result as before.

Horizontal Form Label Sizing

We can change the form label sizing with the column prop.

For instance, we can write:

We have the Form.Row and Col component to add our rows and columns,

The column prop on Form.Label lets us change the size of the labels.

The size prop on the Form.Control lets us change the size of the form controls.

Column Sizing

We can change the column sizing with the breakpoint props.

These props include xs for changing column sizes for small screens.

sm for changing column sizes for medium-sized screens.

lg for changing column sizes for large-sized screens.

xl lets us change column sizes for extra-large screen sizes.

For instance, we can write:

We change the columns for extra small screens and up.

We change the Address field to take up 5 out of 12 columns.

And City field takes up 3 out of 12 columns.

Auto-Sizing

We can change the breakpoint props to auto to change the size.

For example, we can write:

We change the first 2 columns to auto to let React Bootstrap decide the size for us.

Inline Forms

We can add the inline prop to make the form inline.

For example, we can write:

We just add the inline prop to the Form so that we can make the form element display inline.

Image for post
Image for post
Photo by Zdeněk Macháček on Unsplash

Conclusion

There’re many ways to layout forms.

We can make it inline.

And we can add rows and columns to place the input controls where we want them.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store