How to decrease input height with floating labels in React-Bootstrap?
Last Updated :
28 Apr, 2025
React-Bootstrap is a front-end framework that was designed keeping React in mind. Let's learn a little bit about floating labels. Floating labels are the form labels that float over the input fields. For creating floating labels, we wrap <Form.Control> element inside <FloatingLabel>.
In this article, we are going to see different ways through which we can decrease the input height of form elements with floating labels in React-Bootstrap. Below are some approaches to do it.
Steps to create React Application and Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-bootstrap
npm install bootstrap
Project Structure:
.png)
Approach 1: Using "size" prop
In this approach, we will use the "size" prop of the <Form. Control>. We can pass two different values:
- "sm": When the size prop has sm as a value, it decreases the size of the input fields.
- "lg": When the size prop has lg as a value, it increases the size of the input fields.
Example: In this example, we will decrease input height using a size prop. We have used size prop in the email field only to see the difference between the input height of textarea and input.
JavaScript
import FloatingLabel from "react-bootstrap/FloatingLabel";
import { Container, Form } from "react-bootstrap";
function App() {
return (
<>
<Container className=" m-3">
<h2 style={{ color: "green" }}>
Decreasing input height with floating label
</h2>
<FloatingLabel controlId="floatingInput"
label="Email address">
<Form.Control
type="email"
placeholder="[email protected]"
className="mb-3"
size="sm"
/>
</FloatingLabel>
<FloatingLabel controlId="floatingTextarea2" label="Comments">
<Form.Control
as="textarea"
placeholder="Leave a comment here"
style={{ height: "100px" }}
/>
</FloatingLabel>
</Container>
</>
);
}
export default App;
Output:
Approach 2: Using custom CSS
In this approach, we will decrease input height by using traditional CSS classes. Below is the examples for the same.
Example: In this example, we have given className namely "smaller-input" to textarea. Add this code to App.js and index.css file respectively.
JavaScript
import FloatingLabel from 'react-bootstrap/FloatingLabel';
import { Container, Form } from "react-bootstrap";
import './index.css';
function App() {
return (
<>
<Container className=" m-3">
<h2 style={{color:"green"}}>Decreasing input height with floating label</h2>
<FloatingLabel
controlId="floatingInput"
label="Email address"
>
<Form.Control type="email" placeholder="[email protected]" className=' mb-3' />
</FloatingLabel>
<FloatingLabel controlId="floatingTextarea2" label="Comments" >
<Form.Control as="textarea"
placeholder="Leave a comment here"
className='smaller-input '
style={{ height: '100px' }}
/>
</FloatingLabel>
</Container>
</>
);
}
export default App;
.smaller-input {
font-size: 12px;
padding: 2px 5px;
}
Output:
.gif)
Similar Reads
How to Create Smaller `Input` in React-Bootstrap ? ReactJS is one of the most favorite libraries for building attractive applications. Combining Bootstrap with ReactJS is a powerful tool for making the application more interactive. A Smaller Input in React-Bootstrap refers to reducing the size of an input field component, typically achieved by apply
4 min read
How to use Bootstrap to align labels with content into 4 columns ? The motive of this article is to align the content into four columns where the first two columns denote the labels and its content and the last two columns denote the labels and its content. The class "row" and "col" are used to create a grid which can be represented by a number of rows and columns.
2 min read
React Bootstrap Floating labels Labels are the content tags through which we can target input fields and Floating labels are those tags that display inside the input tag, and when we start changing data, it comes over through floating. Floating Labels are used in form with multiple kinds of input fields like text, number, select,
2 min read
How to set input box to be a floating number in ReactJS ? When working with forms in ReactJS, you may encounter scenarios where you need to accept floating-point numbers as input from users. We will set an input box to accept floating numbers in ReactJS and handle the validation of the entered values. PrerequisitesReact JS NPM and Node.jsApproach If we wan
2 min read
How to Create Form Layouts with Bootstrap ? Form Layouts in Bootstrap refer to the arrangement and presentation of form elements within a web page. To create Form Layouts with Bootstrap, utilize grid system classes to structure forms horizontally or vertically, and enhance them with input groups, inline forms, and responsive designs for impro
5 min read
How to replace container class in react-bootstrap? The container class provides a responsive fixed-width container. In this article, we will learn How to replace container class in react-bootstrap. We will wrap the outermost content so that the page has margins. Table of Content Using React Bootstrap Container Using Traditional BootstrapSteps to cre
2 min read