React Bootstrap Form Layout
Last Updated :
23 Jul, 2025
Improve
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 bootstrapStep 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.
//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.
//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.
//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.
//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 startOutput:
