The React-Bootstrap form control can be sized using CSS properties or with the built-in size
prop. In this tutorial we will explore the DOM to see the values that the size
prop applies.
We will also update the form-control
class that gets applied by Bootstrap and use it to add custom CSS sizing values.
Here is what we will build:

React-Bootstrap Form Control Size Prop
The React-Bootstrap form control component comes with a size
prop that affects the min height, padding, font size, and border radius properties. The two values that size
accepts are sm
and lg
. The lg
values can be seen in the DOM screenshot below:

It is useful that the size
prop updates the min-height
value. The padding and font size can also affect height. However, it would be useful if there was a width prop so that the form control didn’t auto-expand due to the width: 100%
that is on the form-control
class.
How to Set React-Bootstrap Form Control Width
The React-Bootstrap form control component renders as an input element with class form-control
. We can set a fixed width on the form control by adding a width property to the form-control
class.
In this tutorial I have shown how to set both width
and max-width
:
.form-control {
width: 35%;
max-width: 40%;
}
You wouldn’t really need both of these values. The width value overwrites the default 100% width on the form-control
class. The max-width
will essentially limit the form control in the same way.
After customizing Form Control width, check out this tutorial on Modal width and height.
How to Set React-Bootstrap Form Control Height
Usually we don’t need to customize the height of the form control. The “sm” and “lg” sizing classes that get applied by the size
prop have a calculation for height. Here’s what the form-control-sm
class looks like:

However, we can customize form control height by targeting the form-control
class:
.form-control {
min-height: 5.5rem;
}
I made the form control for this demo much higher than necessary for the padding, line height, and font size that the component has.
The form control has lots more possible customization options. Here’s how to customize form control border, hover, and focus color, and here’s how to control the component values.