How to Create Smaller `Input` in React-Bootstrap ?
Last Updated :
24 Apr, 2025
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 applying custom styles, using Bootstrap's predefined classes, or React-Bootstrap's size prop, resulting in a more compact and visually smaller input element.
Prerequisites:
Steps to Create React Application and Installing Bootstrap:
Step 1: Create a React application using the following command.
npx create-react-app input
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd input
Step 3: Now install react-bootstrap in your working directory i.e. input by executing the below command in the VScode terminal.
npm install react-bootstrap bootstrap
Step 4: Now we need to Add Bootstrap CSS to the index.js file.
import 'bootstrap/dist/css/bootstrap.min.css';
Project Structure:
It will look like the following.
Example 1: In this example, we are using the inbuilt small input class that is provided by react-bootstrap. We are not applying any external styling to the input field. Also, we have taken a default input field. From the output, you can see that the size of the small input field and default input field varies. We have used the react-bootstrap class (form-control-sm) that is designed to reduce the size of the form control elements.
JavaScript
//App.js
import React, { useState } from 'react';
import { Button } from 'react-bootstrap';
const App = () => {
const [smInput, setsmInput] = useState('');
const [dInput, setdInput] = useState('');
const [smGreet, setsmGreet] = useState('');
const [dGreet, setdGreet] = useState('');
const smInputChnage = (e) => {
setsmInput(e.target.value);
};
const defaultInput = (e) => {
setdInput(e.target.value);
};
const smGreetHandle = () => {
setsmGreet(`Hello, ${smInput}! (Small Input)`);
};
const dGreetHandle = () => {
setdGreet(`Hello, ${dInput}! (Default Input)`);
};
return (
<div className="text-center">
<h1 style={{ color: 'green' }}>
GeeksforGeeks
</h1>
<div className="my-3">
<input
className="form-control form-control-sm"
size="sm"
type="text"
placeholder="Small input"
value={smInput}
onChange={smInputChnage}/>
<Button variant="primary"
onClick={smGreetHandle}>
Greet (Small Input)
</Button>
{smGreet && <p>{smGreet}</p>}
</div>
<div className="my-3">
<input
className="form-control"
type="text"
placeholder="Default input"
value={dInput}
onChange={defaultInput}
/>
<Button variant="primary"
onClick={dGreetHandle}>
Greet (Default Input)
</Button>
{dGreet && <p>{dGreet}</p>}
</div>
</div>
);
};
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: In this example, we have used the "input-group-sm" class in which there ae different types of feilds. In this we have specified the input feild with the smaller input and there is one more input feild with the big input size. We can see the sixe of each of the input feild. The smaller input feild as the width smaller then the big sized input feild.
JavaScript
import React, { useState } from 'react';
import { Container,
Row, Col,
Form,
InputGroup } from 'react-bootstrap';
const App = () => {
const [sInput, setsInput] = useState('');
const [bInput, setbInput] = useState('');
const smallInput = (e) => {
setsInput(e.target.value);
};
const bigInput = (e) => {
setbInput(e.target.value);
};
return (
<Container>
<Row>
<Col>
<h1 style={{ color: '#0B8457' }}>
GeeksforGeeks
</h1>
</Col>
</Row>
<Row>
<Col md={6}>
<Form.Group>
<Form.Label>
Enter Text Small Input:
</Form.Label>
<InputGroup className="input-group-sm">
<Form.Control
type="text"
placeholder="Small input"
className="form-control-sm"
value={sInput}
onChange={smallInput}
/>
</InputGroup>
</Form.Group>
<p>Entered Text: {sInput}</p>
</Col>
<Col md={6}>
<Form.Group>
<Form.Label>
Enter Text Big Input:
</Form.Label>
<InputGroup className="input-group-lg">
<Form.Control
type="text"
placeholder="Big input"
className="form-control-lg"
value={bInput}
onChange={bigInput}
/>
</InputGroup>
</Form.Group>
<p>
Entered Text:
{bInput}
</p>
</Col>
</Row>
</Container>
);
};
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Similar Reads
How to create your own React Bootstrap theme ?
In this article, we will learn how to create our own react-bootstrap theme on a website Themestr.app and add it to our react project.Features:No need to think about responsiveness.A wide range of color options is available to choose from.Very easy to work and integrate into the project.Prerequisite:
3 min read
How To Install Bootstrap in ReactJS?
Bootstrap is one of the most popular CSS frameworks for developing responsive and mobile-first websites. Integrating Bootstrap with ReactJS helps you build sleek, responsive interfaces quickly and easily. In this article, we will walk you through the step-by-step process of installing Bootstrap in R
4 min read
How to create basic text input in React Native ?
Text input is a basic component that allows users to input text through the keyboard. It is widely used in mobile applications for taking usernames, passwords, user details, and much more.In React Native, we have a TextInput component to achieve this. It comes with many props that help us to modify
4 min read
How to Create a Responsive Layout with React Bootstrap ?
Creating a responsive layout with React Bootstrap means designing a web page that adapts and looks good on various screen sizes and devices. React Bootstrap provides responsive components and grid system classes that help in organizing and scaling content effectively, ensuring a seamless user experi
3 min read
How to Customize the grid layout in React Bootstrap?
In this article, we will be customizing the grid layout in React Bootstrap. Grid layout is used to align the elements with ting the grid format according to the requirements. In React Bootstrap, we can control the number of columns, spacing, responsiveness, and other properties to create a more attr
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
How to use Bootstrap Icons in React ?
React is a free library for making websites look and feel cool. With React, your websites can be super interactive and lively. It’s great for making modern websites where everything happens on one page. The best part is that you can build and reuse different parts of your webpage, making it easy to
2 min read
How to Make the Navbar Collapse on Smaller Screens in React Bootstrap ?
Earlier, websites were mainly designed for desktop computers because that's what most people used. But now, with so many devices that can access the internet, websites need to be responsive on all sorts of screen sizes and types. So, In this article, we will see how to make Navbar collapse on a smal
3 min read
How to Make Scrollable Drop Down Lists in React-Bootstrap ?
In this article, we will learn how to make Scrollable Dropdown lists in React-Bootstrap. Drop-down lists allow users to choose an option from a list of available options visible whenever the corresponding component is clicked or triggered. Using React-bootstrap, we can customize the drop-down list a
3 min read
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
3 min read