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="name@example.com" 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; |
CSS
.smaller-input { font-size: 12px; padding: 2px 5px;} |
Output:
How to decrease input height with floating labels in React-Bootstrap?
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.
Table of Content
- Using “size” prop
- Using custom CSS