React Bootstrap Form Layout
React-Bootstrap is a front-end framework mainly customized for React. It simplifies the process of designing forms by providing a set of pre-designed components. These components can integrate with React application to create elegant and responsive forms with ease.
Syntax:
<Form>
<Form.Label> ... </Form.Label>
<Form.Control type="email" />
....
</Form>
Creating React Application and installing dependencies.
Step 1: Create a React application using the following command.
npx create-react-app bootstraplayout
cd bootstraplayout
Step 2: Install the required dependencies.
npm install react-bootstrap bootstrap
Step 3: Add the below line in index.js file.
import 'bootstrap/dist/css/bootstrap.css';
Folder Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.9.2",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example 1: Using Grid System
The grid system in React Bootstrap allows developers to create flexible and responsive layouts by dividing the container into rows and columns.
Javascript
//App.js import React from "react" ; import { Container, Row, Col, Form, Button } from "react-bootstrap" ; const GridForm = () => { const containerStyle = { margin: "20px 0" , padding: "20px" , border: "1px solid #ddd" , borderRadius: "10px" , backgroundColor: "#f9f9f9" , }; const submitButtonStyle = { marginTop: "20px" , backgroundColor: "#28a745" , // React Bootstrap success color border: "none" , borderRadius: "5px" , padding: "10px 20px" , fontSize: "16px" , cursor: "pointer" , }; return ( <Container style={containerStyle}> <Form> <Row> <Col> <Form.Label>Email:</Form.Label> <Form.Control type= "email" placeholder= "Enter your email" /> </Col> <Col> <Form.Label>Password:</Form.Label> <Form.Control type= "password" placeholder= "Enter your password" /> </Col> </Row> <Button variant= "primary" type= "submit" style={submitButtonStyle} > Submit </Button> </Form> </Container> ); }; export default GridForm; |
Output:
Example 2: Form Control Components
React Bootstrap provides dedicated form control components like FormControl, FormGroup, and ControlLabel. These components offer more control over individual form elements.
Javascript
//App.js import React from "react" ; import { Container, Row, Col, Form, Button } from "react-bootstrap" ; const FormControlForm = () => { const formStyle = { maxWidth: "400px" , margin: "20px auto" , padding: "20px" , border: "1px solid #ddd" , borderRadius: "10px" , backgroundColor: "#f5f5f5" , }; const submitButtonStyle = { marginTop: "20px" , backgroundColor: "#28a745" , // React Bootstrap success color border: "none" , borderRadius: "5px" , padding: "10px 20px" , fontSize: "16px" , cursor: "pointer" , }; return ( <Form style={formStyle}> <Form.Group> <Form.Label>Email:</Form.Label> <Form.Control type= "email" placeholder= "Enter your email" /> </Form.Group> <Form.Group> <Form.Label>Password:</Form.Label> <Form.Control type= "password" placeholder= "Enter your password" /> </Form.Group> <Button variant= "success" type= "submit" style={submitButtonStyle}> Submit </Button> </Form> ); }; export default FormControlForm; |
Output:
Example 3: Horizontal Form Layout
In a horizontal form layout, form labels and controls are aligned in the same row.
Javascript
//App.js import React from "react" ; import { Container, Row, Col, Form, Button } from "react-bootstrap" ; const HorizontalForm = () => { const submitButtonStyle = { marginTop: "20px" , backgroundColor: "#28a745" , // React Bootstrap success color border: "none" , borderRadius: "5px" , padding: "10px 20px" , fontSize: "16px" , cursor: "pointer" , }; const formStyle = { maxWidth: "400px" , margin: "20px auto" , padding: "20px" , border: "1px solid #ddd" , borderRadius: "10px" , backgroundColor: "#f5f5f5" , }; return ( <Form style={formStyle}> <Form.Group as={Row}> <Form.Label column sm={2}> Email: </Form.Label> <Col sm={10}> <Form.Control type= "email" placeholder= "Enter your email" /> </Col> </Form.Group> <Form.Group as={Row}> <Form.Label column sm={2}> Password: </Form.Label> <Col sm={10}> <Form.Control type= "password" placeholder= "Enter your password" /> </Col> </Form.Group> <Button variant= "success" type= "submit" style={submitButtonStyle}> Submit </Button> </Form> ); }; export default HorizontalForm; |
Output:
Example 4: let’s create an advance Layout form using Horizontal form approach.
Javascript
//App.js import Button from 'react-bootstrap/Button' ; import Col from 'react-bootstrap/Col' ; import Form from 'react-bootstrap/Form' ; import Row from 'react-bootstrap/Row' ; function GridComplexExample() { return ( <Form> <Row className= "mb-3" > <Form.Group as={Col} controlId= "formGridEmail" > <Form.Label>Email</Form.Label> <Form.Control type= "email" placeholder= "Enter email" /> </Form.Group> <Form.Group as={Col} controlId= "formGridPassword" > <Form.Label>Password</Form.Label> <Form.Control type= "password" placeholder= "Password" /> </Form.Group> </Row> <Form.Group className= "mb-3" controlId= "formGridAddress1" > <Form.Label>Address</Form.Label> <Form.Control placeholder= "1234 Main St" /> </Form.Group> <Form.Group className= "mb-3" controlId= "formGridAddress2" > <Form.Label>Address 2</Form.Label> <Form.Control placeholder= "Apartment, studio, or floor" /> </Form.Group> <Row className= "mb-3" > <Form.Group as={Col} controlId= "formGridCity" > <Form.Label>City</Form.Label> <Form.Control /> </Form.Group> <Form.Group as={Col} controlId= "formGridState" > <Form.Label>State</Form.Label> <Form.Select defaultValue= "Choose..." > <option>Choose...</option> <option>...</option> </Form.Select> </Form.Group> <Form.Group as={Col} controlId= "formGridZip" > <Form.Label>Zip</Form.Label> <Form.Control /> </Form.Group> </Row> <Form.Group className= "mb-3" id= "formGridCheckbox" > <Form.Check type= "checkbox" label= "Check me out" /> </Form.Group> <Button variant= "primary" type= "submit" > Submit </Button> </Form> ); } export default GridComplexExample; |
Step 4: Run the above code using :
npm start
Output:
Contact Us