Skip to content
Related Articles
Open in App
Not now

Related Articles

React-Bootstrap InputGroup Component

Improve Article
Save Article
Like Article
  • Last Updated : 20 Oct, 2022
Improve Article
Save Article
Like Article

React-Bootstrap is a front-end framework that was designed keeping react in mind. InputGroup Component provides a way to put one add-on or button on either side or both sides of an input. We can use the following approach in ReactJS to use the react-bootstrap InputGroup Component.

InputGroup Props:

  • As: It can be used as a custom element type for this component.
  • HasValidation: It is used in form validation to handle the input’s rounded corners.
  • Size: It is used to control the size of buttons and form elements.
  • BsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Creating 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. folder name, 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: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.



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:


My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!