Summarize this article with:
Forms live or die by their input fields. Get them wrong and users bounce.
Bootstrap input examples give you production-ready form controls that work across all browsers and devices. No custom styling headaches. No cross-browser inconsistencies.
The Bootstrap framework handles text fields, password inputs, email validation, date selectors, file uploads, and specialized controls like range sliders. Each one styled and responsive out of the box.
This guide covers every input type with working code snippets. You’ll learn sizing options, validation states, floating labels, and input group combinations.
Copy the examples directly into your projects. Modify as needed.
What is Bootstrap Input
Bootstrap input is an HTML form control styled with Bootstrap CSS classes for consistent appearance across browsers and devices.
The .form-control class transforms standard input elements into responsive, professional-looking fields. Works on text fields, password inputs, email fields, date selectors, and file uploads.
Bootstrap 5 provides utility classes like .form-control-lg and .form-control-sm to adjust sizing. You also get built-in validation states, floating labels, and input group components.
These form elements follow responsive design principles. They scale properly on mobile, tablet, and desktop screens without extra work.
Bootstrap Input Examples
Bootstrap Input Modes and Usages
Playing Around with Text Fields in Bootstrap
Simple, Easy, Breezy: A Bootstrap Input Example
Cool Contact Form Made by Danlouis9701
Colorlib’s Take on Contact Form 7
A Trio of Checkboxes: Bootstrap Input Done Right
Login and Signup Forms with Style
Login Form 15: It’s a Keeper
Bootstrap Input with Radio Buttons: Choose Wisely!
Horizontal Form in Bootstrap: Keep It Simple
Bootstrap 3’s Cool Contact Form: Check It
Pick Your Choice: Bootstrap Input Select List
Finding Stuff with Search Form v3
Making Bookings with Reg Form v29
Pick a File with Custom Choose File
Snap a Pic with Image Upload Button
Get Files Up with Angular File Upload Directive
Make It Untouchable with Read Only Inputs
Play with Sizes with Height Sizing of Form Controls
How to Create a Basic Bootstrap Text Input
Add the .form-control class to any <input> element. That’s it.
The class applies padding, border styling, focus states, and typography automatically. Your text field inherits Bootstrap’s design system instantly.
“ <input type="text" class="form-control" placeholder="Enter text"> `
Wrap the input in a
with .mb-3 for proper spacing in Bootstrap forms. Pair it with a
` <div class="mb-3"> <label for="username" class="form-label">Username</label> <input type="text" class="form-control" id="username"> </div> `
What Are the Bootstrap Input Types
Bootstrap supports all standard HTML input types. Each one gets the same consistent styling through the .form-control class.
The framework handles text, password, email, number, date, time, file, color, and range inputs. Some types need slight markup adjustments.
What is a Bootstrap Text Input
The default input type. Use type=”text” for names, addresses, search queries, or any freeform content.
` <input type="text" class="form-control" placeholder="Your name"> `
What is a Bootstrap Password Input
Masks characters as dots for security. Set type=”password” on your input element.
` <input type="password" class="form-control" placeholder="Password"> `
Consider adding a visibility toggle with JavaScript for better user experience.
What is a Bootstrap Email Input
Uses type=”email” for built-in browser validation. Mobile keyboards show the @ symbol automatically.
` <input type="email" class="form-control" placeholder="email@example.com"> `
What is a Bootstrap Number Input
Restricts input to numeric values. Browsers add increment/decrement arrows by default.
` <input type="number" class="form-control" min="0" max="100" step="1"> `
Use min, max, and step attributes to control the allowed range.
What is a Bootstrap Date Input
Native date picker with type=”date”. Browser support varies, so test across platforms.
` <input type="date" class="form-control"> `
For advanced functionality, check out Bootstrap datepicker libraries.
What is a Bootstrap Time Input
Lets users select hours and minutes. Use type=”time” for scheduling interfaces.
` <input type="time" class="form-control"> `
What is a Bootstrap File Input
File uploads need the .form-control class in Bootstrap 5. Previous versions required different markup.
` <input type="file" class="form-control"> `
Add multiple attribute for multi-file selection. Use accept to filter file types.
What is a Bootstrap Color Input
Opens a color picker dialog. Apply .form-control-color alongside .form-control for proper width.
` <input type="color" class="form-control form-control-color" value="#563d7c"> `
What is a Bootstrap Range Input
Creates a slider control. Use .form-range instead of .form-control for this type.
` <input type="range" class="form-range" min="0" max="100"> `
For more styling options, explore CSS range slider techniques.
What Are Bootstrap Input Sizes
Three sizing options: large, default, and small. Add .form-control-lg or .form-control-sm to adjust.
Large inputs work well for primary form fields, mobile interfaces, or accessibility needs.
` <input type="text" class="form-control form-control-lg" placeholder="Large input"> `
Default size fits most use cases. No extra class needed.
` <input type="text" class="form-control" placeholder="Default input"> `
Small inputs save space in compact layouts, table cells, or inline forms.
` <input type="text" class="form-control form-control-sm" placeholder="Small input"> `
How to Add Placeholder Text to Bootstrap Inputs
Use the placeholder attribute. The text appears in light gray until the user starts typing.
` <input type="text" class="form-control" placeholder="Search products..."> `
Placeholders should hint at expected input format. Never use them as label replacements.
Screen readers may skip placeholder text. Always include visible labels for accessible forms.
Style placeholder text with CSS pseudo-elements if needed:
` ::placeholder { color: #6c757d; opacity: 0.7; } `
How to Create a Disabled Bootstrap Input
Add the disabled attribute to prevent user interaction. The field appears grayed out and won't accept focus.
` <input type="text" class="form-control" disabled placeholder="Disabled input"> `
Disabled inputs don’t submit with form data. Use them for display-only values or conditional fields.
Style changes automatically: lighter background, reduced opacity, cursor changes to not-allowed.
How to Create a Readonly Bootstrap Input
The readonly attribute allows focus but blocks editing. Data still submits with the form.
` <input type="text" class="form-control" readonly value="Read only value"> `
Perfect for calculated fields, system-generated IDs, or confirmed data users shouldn’t modify.
Add .form-control-plaintext to remove the border and show text inline:
` <input type="text" class="form-control-plaintext" readonly value="plain@example.com"> `
What is Bootstrap Input Validation
Form validation provides visual feedback on user input. Bootstrap uses .is-valid and .is-invalid classes.
Green borders indicate correct input. Red borders signal errors. Feedback messages appear below the field.
Works with browser validation or custom validation logic through your frontend code.
How to Show Valid State on Bootstrap Input
Apply .is-valid to the input element. Add .valid-feedback for the success message.
` <input type="text" class="form-control is-valid"> <div class="valid-feedback">Looks good!</div> `
How to Show Invalid State on Bootstrap Input
Use .is-invalid class with .invalid-feedback for error messages.
` <input type="email" class="form-control is-invalid"> <div class="invalid-feedback">Please enter a valid email.</div> `
Validation states work with ARIA attributes for screen reader support.
How to Add Labels to Bootstrap Inputs
Use the .form-label class on
` <label for="email" class="form-label">Email address</label> <input type="email" class="form-control" id="email"> `
Labels improve usability. Clicking the label focuses the input field.
Never skip labels. They’re critical for web accessibility and screen readers.
How to Create Floating Labels in Bootstrap
Floating labels sit inside the input, then animate above when the field receives focus or contains a value.
Wrap input and label in a .form-floating container. The label must come after the input.
` <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com"> <label for="floatingEmail">Email address</label> </div> `
Placeholder attribute is required but hidden. The label displays instead.
Works with text, email, password, and textarea elements. Creates a clean user interface with less vertical space.
What is Bootstrap Input Group
Input groups combine inputs with text, buttons, or other elements. Use .input-group as the wrapper class.
Common uses: currency symbols, search buttons, domain prefixes, unit labels.
How to Add Text Before a Bootstrap Input
Place a with .input-group-text before the input element.
` <div class="input-group mb-3"> <span class="input-group-text">$</span> <input type="number" class="form-control" placeholder="Amount"> </div> `
How to Add Text After a Bootstrap Input
Same approach, but position the span after the input.
` <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Username"> <span class="input-group-text">@example.com</span> </div> `
How to Add Buttons to Bootstrap Input Group
Replace the span with a Bootstrap button element. Works great for Bootstrap search box designs.
` <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search..."> <button class="btn btn-primary" type="button">Search</button> </div> `
Add Bootstrap icons inside buttons for visual appeal:
` <div class="input-group"> <input type="text" class="form-control"> <button class="btn btn-outline-secondary"> <i class="bi bi-search"></i> </button> </div> `
How to Use Bootstrap Inputs in a Form
Combine input types, labels, validation, and input groups into complete Bootstrap login form or Bootstrap contact form layouts.
Structure with the Bootstrap grid system for multi-column designs.
` <form> <div class="row mb-3"> <div class="col-md-6"> <label for="firstName" class="form-label">First Name</label> <input type="text" class="form-control" id="firstName" required> </div> <div class="col-md-6"> <label for="lastName" class="form-label">Last Name</label> <input type="text" class="form-control" id="lastName" required> </div> </div>
<div class=”mb-3″> <label for=”email” class=”form-label”>Email</label> <input type=”email” class=”form-control” id=”email” required> <div class=”invalid-feedback”>Valid email required.</div> </div>
<div class=”form-floating mb-3″> <input type=”password” class=”form-control” id=”password” placeholder=”Password”> <label for=”password”>Password</label> </div>
<button type=”submit” class=”btn btn-primary”>Submit</button> </form> `
Add novalidate to the form tag when using custom validation. Handle submission with event listeners.
Test your forms on mobile devices. Bootstrap inputs work well with touch interfaces and virtual keyboards.
Consider Bootstrap checkbox and Bootstrap toggle switch components for boolean fields in your form layouts.
FAQ on Bootstrap Input Examples
What is the form-control class in Bootstrap?
The .form-control class styles HTML input elements with consistent padding, borders, and focus states. It makes text fields, email inputs, password fields, and textareas look uniform across all browsers. Apply it to any input element for instant Bootstrap styling.
How do I change the size of Bootstrap inputs?
Add .form-control-lg for large inputs or .form-control-sm for small ones. The default size requires no extra class. These sizing classes adjust padding, font size, and height proportionally.
What is the difference between disabled and readonly inputs?
Disabled inputs block all interaction and don’t submit form data. Readonly inputs allow focus and text selection but prevent editing. Readonly values still submit with the form. Choose based on whether you need the data transmitted.
How do I add validation to Bootstrap inputs?
Apply .is-valid or .is-invalid classes to input elements. Add .valid-feedback or .invalid-feedback divs below for messages. Bootstrap displays green or red borders automatically. Works with browser validation or custom scripts.
What are floating labels in Bootstrap?
Floating labels animate from inside the input to above it when focused. Wrap input and label in a .form-floating div. The label element must follow the input. Requires a placeholder attribute to function correctly.
How do I create an input group in Bootstrap?
Wrap elements in a .input-group container. Add .input-group-text spans for prefixes or suffixes like currency symbols. You can include buttons, Bootstrap dropdown menus, or multiple inputs within the same group.
Can I use Bootstrap inputs without jQuery?
Yes. Bootstrap 5 removed the jQuery dependency completely. Input styling works with pure CSS classes. Validation and dynamic behaviors use vanilla JavaScript. Earlier Bootstrap versions (3 and 4) required jQuery for certain components.
How do I style placeholder text in Bootstrap inputs?
Use the ::placeholder CSS pseudo-element to customize color, opacity, and font style. Bootstrap applies default gray styling. Override it in your stylesheet. Placeholder text should hint at expected format, not replace labels.
What input types does Bootstrap support?
Bootstrap supports all standard HTML5 input types: text, password, email, number, date, time, datetime-local, file, color, range, search, tel, and url. Each receives consistent styling through the .form-control class except range inputs.
How do I make Bootstrap inputs accessible?
Always pair inputs with
Conclusion
These Bootstrap input examples cover everything you need to build professional form interfaces. From basic text fields to complex input group combinations.
The .form-control class handles the heavy lifting. Sizing, focus states, and cross-browser compatibility work automatically.
Validation feedback keeps users informed. Floating labels save vertical space. Input groups add context with prefixes, suffixes, and action buttons.
Start with the code snippets provided. Customize colors, borders, and spacing through your own stylesheet or override Bootstrap CSS variables.
Test on mobile devices. Bootstrap’s responsive form controls adapt to touch interfaces and virtual keyboards without extra configuration.
Build forms that convert. These components give you the foundation.
