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.
