How to use“size” prop in ReactJS
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= "name@example.com" 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:
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