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
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
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
In this tutorial I have shown how to set both
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
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.