Bootstrap Forms
Forms are how visitors send information to your site: logins, sign-ups, contact messages, and more. Bootstrap 5 gives your form controls a clean, consistent look and makes them responsive out of the box, so you spend less time fighting CSS and more time building.
Styling form controls
The heart of Bootstrap forms is a single class: .form-control. Add it to an <input>, <textarea>, or <select> and Bootstrap gives the element full width, comfortable padding, rounded corners, and a soft blue glow when it is focused. Pair every control with a <label> that carries the .form-label class so the text above the field is spaced correctly.
A basic text field
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="mb-3">
<label for="fullName" class="form-label">Full name</label>
<input type="text" class="form-control" id="fullName" placeholder="Jane Doe">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Notice the wrapping <div class="mb-3">. The mb-3 utility adds a margin at the bottom so stacked fields do not touch each other. Using a wrapper per field is the standard Bootstrap pattern and keeps your spacing even.
Textareas and help text
A <textarea> uses the exact same .form-control class. You can add a small hint below any control with .form-text, and connect it to the input using aria-describedby so screen readers announce it too.
Textarea with help text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="mb-3">
<label for="bio" class="form-label">Short bio</label>
<textarea class="form-control" id="bio" rows="3" aria-describedby="bioHelp"></textarea>
<div id="bioHelp" class="form-text">Tell us about yourself in a sentence or two.</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Sizing and disabled fields
Make a field taller with .form-control-lg or shorter with .form-control-sm. Add the standard HTML disabled attribute to grey out a control and stop people from editing it. Bootstrap styles the disabled state automatically.
Large, small, and disabled inputs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input type="text" class="form-control form-control-lg mb-2" placeholder="Large input">
<input type="text" class="form-control mb-2" placeholder="Default input">
<input type="text" class="form-control form-control-sm mb-2" placeholder="Small input">
<input type="text" class="form-control" placeholder="Cannot edit" disabled>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Common form classes
Exercise: Bootstrap Forms
In Bootstrap's floating label markup, what order must the label and input be in?
