Top Examples of Bootstrap Forms for Modern Websites

Around 19% of all websites run on the Bootstrap CSS framework, and forms are the most copy-pasted components in the entire library. Makes sense. Every site needs a login screen, a contact page, or a checkout flow.

But a lot of those forms look identical, or worse, they’re broken on mobile because someone grabbed a snippet from a Bootstrap 4 tutorial and didn’t realize the markup changed in version 5.

This guide covers practical Bootstrap forms examples you can actually use. From basic stacked layouts and inline forms to floating labels, grid-based multi-column designs, input groups, and validation styles. Each section includes the specific classes, the responsive behavior, and the common mistakes to avoid so your forms work across browsers and screen sizes without extra CSS.

What Are Bootstrap Forms

Bootstrap forms are pre-styled HTML form elements that use the Bootstrap CSS framework’s classes to create consistent, responsive input layouts across browsers. Instead of writing custom CSS for every text field, checkbox, and button, you apply classes like .form-control, .form-label, and .form-select to get a clean, unified look instantly.

That’s the short version. The longer explanation involves understanding how Bootstrap handles form styling differently from raw HTML5 forms.

A plain HTML form renders differently in Chrome, Firefox, Safari, and Edge. Padding, font sizes, border styles, focus outlines. All inconsistent. Bootstrap normalizes all of that through its Reboot stylesheet and then layers on its own design system.

According to W3Techs, roughly 19% of all websites globally use Bootstrap. 6sense data puts the number at over 3.9 million companies running Bootstrap as of 2026. A massive chunk of those sites rely on Bootstrap’s form components for everything from login screens to checkout flows.

Bootstrap 5 vs. Bootstrap 4 Forms

Bootstrap 5 changed the form markup significantly. If you’re still referencing Bootstrap 4 tutorials, you’ll run into problems.

Here’s what shifted:

Bootstrap 5 also dropped Internet Explorer support, which let the team use more modern CSS features. The form controls now use CSS custom properties and Sass variables that adapt to color modes, including dark mode.

Mark Otto and Jacob Thornton originally built Bootstrap at Twitter in 2010 to bring consistency to internal tools. That consistency still drives the framework’s form design philosophy today. Every .form-control gets the same border radius, the same padding, the same focus state. It just works.

How Bootstrap Forms Differ from Plain HTML

Width handling: Bootstrap applies display: block and width: 100% to almost all form controls by default. Plain HTML inputs don’t do that. They render at whatever width the browser feels like.

Focus states: Bootstrap adds a subtle blue box-shadow on focus. It’s small, but it makes a real difference for usability. Native browser focus rings are famously ugly and inconsistent.

Sizing: You get three sizes out of the box with .form-control-sm, the default, and .form-control-lg. No need to fiddle with padding values yourself.

SitePoint’s analysis of Bootstrap 5 notes a 30% reduction in CSS file size compared to version 4. That matters for page load times, and if your forms are on a landing page, every millisecond counts. Invesp research found that a 1-second delay in load time can reduce conversions by up to 7%.

Basic Bootstrap Form Example

See the Pen
Basic Bootstrap 5 Form – SaaS Sign-Up UI by Bogdan Sandu (@bogdansandu)
on CodePen.

The simplest Bootstrap form you can build needs three things: a <form> wrapper, inputs with the .form-control class, and labels using .form-label. That’s it.

Here’s the typical structure. An email field, a password field, a checkbox, and a submit button. Every new developer starts here, and honestly, this template covers a surprising number of real use cases.

The .mb-3 class on each wrapping <div> adds bottom margin (1rem by default) to space things out. This replaced the old .form-group from Bootstrap 4. Took me longer than I’d like to admit to stop typing form-group after the migration.

Common Mistakes in Basic Bootstrap Form Setup

Missing for attributes: If your <label> tag doesn’t have a for attribute matching the input’s id, clicking the label won’t focus the input. Screen readers also lose the association. This breaks form accessibility and creates a poor experience for keyboard users.

Forgetting .form-control: Without this class, your input renders as a tiny, browser-default text box. It won’t match the rest of your Bootstrap layout at all.

Zuko Analytics data shows that two-thirds of people who start filling out a form complete it. But over 67% of visitors will abandon a form permanently if they encounter any complications (WPForms). Bad label associations and inconsistent styling count as complications.

Skipping the type attribute on buttons: Buttons inside a <form> default to type="submit". If you have multiple buttons, the ones that shouldn’t submit the form need type="button" explicitly. This trips up beginners constantly.

When a Basic Stacked Form Works Best

Vertical (stacked) forms are the default for a reason. They perform better on mobile screens and they’re easier to scan.

Zuko Analytics reports that desktop users start forms at a 47% rate compared to 42% on mobile. The difference is small, but the reading pattern matters. Stacked forms naturally fit narrow viewports.

Use the basic stacked layout for contact forms, simple newsletter signups, and login screens. Save the more complex grid layouts for forms that genuinely need multiple columns.

Bootstrap Inline Form Layout

See the Pen
Bootstrap 5 Inline Form Layout by Bogdan Sandu (@bogdansandu)
on CodePen.

Inline forms place elements side by side on a single horizontal row. Think of a compact search bar with a text input and a button sitting right next to each other. Or a quick filter bar at the top of a data table.

Bootstrap 5 doesn’t have a dedicated .form-inline class anymore (that was a Bootstrap 4 thing). Now you build inline layouts using the grid system with .row and .col-auto.

The .col-auto class is the trick here. It makes each column shrink-wrap to its content width instead of stretching to fill available space. Pair that with .g-3 for gutter spacing and the form elements sit neatly in a row.

When Inline Forms Make Sense

Search bars. Quick login prompts in a header. Filter controls on a dashboard. Short subscription forms with just an email field and a button.

That’s roughly the full list of good use cases. The moment you try to stuff four or five fields into an inline layout, it falls apart on anything smaller than a desktop screen.

OptinMonster data found that forms with just 3 fields see conversion rates as high as 25%. That drops to 15% when you push past 6 fields. Inline forms naturally enforce this brevity, which is probably why they work so well for sign up forms and quick data captures.

Responsive Behavior and Breakpoints

Here’s the thing about inline forms that catches people off guard. They don’t automatically stack on mobile.

If you use .col-auto without any responsive breakpoint prefixes, your inline form stays inline at every screen size. On a 320px-wide phone screen, that’s a disaster.

The fix: use responsive column classes. Something like .col-sm-auto instead of .col-auto. Below the sm breakpoint (576px), the columns stack vertically. Above it, they go inline. Your mileage may vary depending on the number of inputs, but this handles most cases well enough.

Solid mobile forms aren’t optional anymore. ContentSquare’s 2024 Digital Experience Benchmark found that while desktop conversion rates sit around 4.03%, mobile devices average just 2.19%. A broken inline form on mobile contributes directly to that gap.

Bootstrap Form Grid and Horizontal Layout

Multi-column form layouts use Bootstrap’s 12-column grid system. You wrap inputs in .row and .col- divs, and the grid handles the spacing and alignment.

This is where Bootstrap forms get genuinely powerful. A two-column registration form, a three-column address section, labels that sit horizontally next to their inputs. The grid gives you all of that with just CSS classes.

Horizontal Forms with Labels and Inputs on the Same Row

See the Pen
Bootstrap 5 Horizontal Form by Bogdan Sandu (@bogdansandu)
on CodePen.

The class to know: .col-form-label. This vertically aligns a label with its input when they’re in the same row. Without it, the label text floats to the top of its column, which looks off.

A horizontal form layout typically puts labels in a .col-sm-2 and inputs in a .col-sm-10. That gives you a clean left-aligned label column with a wider input column. Adjust the ratio to fit your design, but 2/10 or 3/9 splits are the most common.

Horizontal layouts tend to work better on wider screens. They compress labels and inputs on smaller viewports, which can make things cramped. For forms that need to feel compact on desktop but still readable on mobile, consider switching from a horizontal form to a stacked layout below a certain breakpoint.

Multi-Column Forms with the Grid System

See the Pen
Bootstrap 5 Multi-Column Checkout Form by Bogdan Sandu (@bogdansandu)
on CodePen.

Address forms are the classic example. Street address spans the full width. City, state, and zip sit in a three-column row. Bootstrap makes this straightforward with classes like .col-md-6, .col-md-4, and .col-md-2.

Gutter utilities control the spacing between columns. The .g-3 class applies 1rem of guttering both horizontally and vertically. You can also use .gx- (horizontal only) and .gy- (vertical only) for finer control.

Baymard Institute found that the average US checkout flow contains 23.48 form elements, while an ideal checkout only needs 12 to 14. A well-organized grid layout helps you reduce visual clutter even when your form has more fields than you’d prefer. Grouping related fields (like city, state, zip) into a single row signals to users that these fields belong together and speeds up completion.

Good form layout isn’t just about aesthetics. FormStory data shows that single-column forms are completed an average of 15.4 seconds faster than multi-column formats. So only go multi-column when it genuinely makes the form easier to understand, not just to make it shorter on screen.

Bootstrap Form Input Types and Controls

Bootstrap styles a wide range of HTML5 input types out of the box. Text, email, password, number, date, color, range, file. All of them pick up the .form-control styling with consistent borders, padding, and focus states.

The framework doesn’t invent new input types. It takes what HTML5 gives you and makes it look consistent across Chrome, Firefox, Safari, and Edge. That cross-browser consistency is genuinely the main selling point here.

Text Inputs and Textareas

See the Pen
Bootstrap Text Inputs & Textareas by Bogdan Sandu (@bogdansandu)
on CodePen.

Standard text inputs get .form-control. Textareas get the same class. Both render at full width with matching visual styles.

For sizing, .form-control-lg increases padding and font size. .form-control-sm shrinks them. The default sits in between.

One thing that’s easy to miss: the rows attribute on textareas still works with Bootstrap. Setting rows="3" gives you a smaller text area; rows="8" gives you a bigger one. Bootstrap doesn’t override this behavior. Good placeholder text inside your inputs also helps users understand what’s expected before they start typing.

Select Dropdowns and Datalists

See the Pen
Select Dropdowns & Datalist with Bootstrap 5 by Bogdan Sandu (@bogdansandu)
on CodePen.

The .form-select class (not .form-control) is what you use for <select> elements in Bootstrap 5. This was another one of those silent changes from version 4 that caused confusion during migration.

Standard select: applies a custom dropdown arrow and consistent padding.

Multi-select: set the multiple attribute. The dropdown becomes a scrollable list. Bootstrap removes the custom arrow for multi-selects, which is the right call visually.

Datalists: A datalist pairs with a regular text input to provide autocomplete suggestions. Bootstrap styles the input itself, but the dropdown suggestion list inherits browser-default styling. It’s inconsistent across browsers and looks rough, but it works. Zuko Analytics reports that dropdown and select fields cause the highest abandonment rates among all form fields. So use them only when the list of options justifies it.

Checkboxes and Radio Buttons

See the Pen
Bootstrap 5 Form Controls – Checkboxes, Radios & Switches by Bogdan Sandu (@bogdansandu)
on CodePen.

Bootstrap 5 unified custom checkboxes and radios under the .form-check class. The old .custom-control and .custom-checkbox classes from Bootstrap 4 are gone.

The structure is simple. A wrapping div with .form-check, an input with .form-check-input, and a label with .form-check-label.

For inline checkboxes that sit side by side, add .form-check-inline to the wrapper.

Switches use the same markup but add .form-switch to the .form-check wrapper. The input renders as a toggle switch instead of a checkbox. WPForms data notes that forms with radio buttons can be completed 2.5 seconds faster than forms using dropdown selection fields (CXL). If your options are fewer than five or six, radios beat dropdowns every time.

Bootstrap Floating Labels

See the Pen
Bootstrap 5 Floating Labels by Bogdan Sandu (@bogdansandu)
on CodePen.

Floating labels start as placeholder text inside the input, then animate upward when the field gets focus or contains a value. Bootstrap 5 introduced this pattern natively with the .form-floating class.

The markup order matters here, and it’s counterintuitive. The <input> must come before the <label> inside the .form-floating wrapper. This is because Bootstrap uses the CSS sibling selector (~) to detect the input’s state and move the label. If you flip the order, the animation breaks silently. No error, just a static label that never floats.

How Floating Labels Work

Initial state: The label sits inside the input field, looking like placeholder text.

On focus or value: The label shrinks and floats to the top-left corner of the input. A background color (set via CSS) prevents the label from overlapping the input’s border.

For selects: Floating labels work with .form-select too, but the label always shows in its “floated” position since a select always has a value.

Floating labels save vertical space, which is why they’ve become popular in login forms and mobile interfaces. But they come with a trade-off. Users can’t see the label and type at the same time on initial focus. If your field labels are long or need extra context, traditional above-the-input labels are safer.

When to Use (and Skip) Floating Labels

They work well for short forms. Login screens, quick signups, settings pages where field names are obvious (“Email,” “Password,” “Name”).

They’re a bad fit for complex forms with unusual fields. If users need to read the label to understand what the field expects, floating labels create friction. This is especially true for intake forms or application-style forms where each field might need additional explanation.

The Manifest’s research found that 29% of users abandon forms due to security concerns and 27% due to length. Floating labels address the length perception problem by making forms look shorter and simpler. But they don’t fix the underlying complexity if the form actually asks for too much information. Focus on reducing fields first, then layer on floating labels as a refinement.

HubSpot data suggests the average number of fields on lead generation forms is 11. If you’re anywhere near that count, floating labels won’t save you. Look into multi-step forms or conditional logic to break things into manageable chunks instead.

Bootstrap Form Validation Styles

See the Pen
SaaS-style Bootstrap signup form with inline validation by Bogdan Sandu (@bogdansandu)
on CodePen.

Forms without validation are a liability. Users submit bad data, servers reject it, and everyone wastes time. Bootstrap provides CSS-based validation classes that give immediate visual feedback without writing custom styles.

CXL research found that inline form validation reduces errors by 22% and cuts completion time by 42%. Bootstrap’s built-in validation classes make this kind of real-time feedback straightforward to set up.

How .is-valid and .is-invalid Work

Green means go: Adding .is-valid to a .form-control applies a green border and shows any sibling element with the class .valid-feedback.

Red means stop: The .is-invalid class flips the border to red and reveals the .invalid-feedback message.

These classes are purely visual. Bootstrap doesn’t decide what’s valid or invalid. Your JavaScript (or your server-side code) applies the classes based on your own logic. The framework just handles how it looks.

Baymard Institute’s checkout usability testing revealed that 31% of sites still don’t use any inline validation at all, forcing users to submit the form before seeing errors. That’s a significant UX gap you can close with a few Bootstrap classes and some basic JavaScript.

Server-Side vs. Client-Side Validation

You always need both. Client-side validation improves the user experience. Server-side validation protects your data. Skipping client-side vs server-side form input validation is one of those shortcuts that costs you later.

Twitter’s sign-up form is a well-known example of inline validation done right. Each field validates as you type, with clear error messaging that feels like a conversation rather than a lecture. Bootstrap gives you the CSS scaffolding to build something similar.

Custom Validation with JavaScript

Bootstrap’s recommended approach uses the novalidate attribute on the <form> element. This disables the browser’s default validation tooltips (which look different in every browser) and lets you control the experience entirely through Bootstrap’s classes.

The JavaScript pattern is short. Listen for the form’s submit event, call checkValidity(), add a .was-validated class to the form if it fails, and prevent submission. The .was-validated class triggers Bootstrap’s CSS to show all .valid-feedback and .invalid-feedback elements based on each input’s validity state.

Fluent Forms data shows that easy-to-use forms improve first-time error-free submission rates from 42% to 78%. Clear, well-styled form error messages are a big part of that jump.

Input Groups in Bootstrap Forms

Input groups let you attach extra context to a form field. A dollar sign before a price input. A “@” symbol before a username. A search button glued to the end of a text field. Bootstrap handles all of this with the .input-group wrapper.

Basic Input Group Structure

The pattern is always the same wrapping <div>:

• .input-group as the container
• .input-group-text for static text or icon addons
• A .form-control input somewhere in the middle

You can prepend addons (before the input), append them (after), or do both. Bootstrap uses flexbox under the hood, so the addon and input automatically align and share a unified border radius. The first element gets left-rounded corners, the last gets right-rounded corners.

Stripe’s checkout forms are a masterclass in input group design. Their card number field uses inline icons and embedded formatting that guide the user through each step. While Bootstrap’s input groups aren’t as sophisticated as Stripe’s custom UI, they provide the same structural foundation.

Input Groups with Buttons and Dropdowns

Button addon: Drop a <button> inside the .input-group alongside the input. No extra classes needed on the button itself (beyond the usual .btn and .btn- classes).

Dropdown addon: Nest a standard Bootstrap dropdown inside the input group. The dropdown toggle button sits flush against the input, creating a compact search-with-category-filter pattern.

Sizing works through .input-group-lg and .input-group-sm on the wrapper. All child elements scale proportionally. WPForms reports that 74% of businesses use web forms to generate leads, and nearly half identify them as their top converting tool (Hubspot). Clean input groups on those forms used for lead generation reduce friction at the exact moment someone decides to share their information.

Disabled and Readonly Form States

See the Pen
Bootstrap 5 Disabled & Readonly Form States by Bogdan Sandu (@bogdansandu)
on CodePen.

Not every field in a form should be editable at all times. Bootstrap provides two distinct states for locking down inputs, and they serve very different purposes.

Disabled Inputs and Fieldsets

The disabled attribute does three things at once:

• Grays out the input visually
• Prevents user interaction (no clicking, no typing)
• Excludes the field’s value from form submission data

That last point catches people off guard. If you disable a field, its value doesn’t get sent to the server when the form submits. If you need the value submitted but don’t want the user editing it, readonly is what you want instead.

You can also disable an entire <fieldset> at once. Every input, select, textarea, and button inside the fieldset becomes disabled. This is handy for forms where certain sections only become active based on a previous selection (classic interactive form pattern).

Readonly and .form-control-plaintext

Standard readonly: The readonly attribute keeps the input styled normally but prevents editing. The value still gets submitted. Use this when users need to see a pre-filled value they can’t change.

Plaintext variant: Adding .form-control-plaintext (along with readonly) removes the input’s border and background, making it look like regular page text. This works well for account settings pages where you display an email address or username that isn’t editable.

From an accessibility standpoint, the distinction matters. Screen readers handle disabled and readonly differently. A disabled field gets announced as “dimmed” or “unavailable.” A readonly field is still focusable and readable. The WebAIM Million 2025 report found that 95.9% of the top million websites fail basic WCAG 2.2 standards, and form-related issues (missing labels, improper error handling) are a major contributor.

Getting disabled and readonly states right is one of those small things that adds up for users relying on assistive technology. It also matters for GDPR compliant forms where certain consent fields need to display locked-in data without allowing modification.

Bootstrap Form with a Real-World Example

Individual components are only useful if you can combine them. Here’s where everything covered so far comes together in a single, practical form template.

A checkout form or contact page typically needs: a grid layout for name and email fields side by side, floating labels for a compact look, validation feedback on required fields, an input group for a phone number with a country code prefix, a select dropdown for a subject or category, a textarea for a message, and a submit button.

What the Combined Template Uses

That table is basically the anatomy of a well-built web form. Each component handles one job. The grid manages spacing. Floating labels save vertical space. Validation prevents bad data. Input groups add context.

Adapting the Template for Different Use Cases

The same structural bones work for very different purposes. Swap the fields and labels, keep the classes.

For a contact us page: First name and last name in a .row, email below, subject dropdown via .form-select, and a textarea. Add .was-validated logic on submit.

For registration forms: Email, password (with a .form-text hint about password requirements), confirm password, and a .form-check for terms acceptance. Zuko Analytics data shows registration forms take just one minute and thirty-five seconds to complete on average, so keep them tight.

For a lead generation form: Name, company, email, and a single qualifying question. HubSpot data says only 40% of marketers use multi-step forms, but those that do see an 86% higher conversion rate. If your lead form goes beyond 4 to 5 fields, consider a multi-step form template approach to break it up.

Performance Tip

You don’t need to load all of Bootstrap just for forms. The framework’s modular Sass structure (compiled via Node.js or webpack) lets you import only the components you use.

Pull in forms.scss, grid.scss, buttons.scss, and utilities.scss. Skip navbars, carousels, modals, and everything else your form page doesn’t need. SitePoint’s analysis noted a 30% smaller CSS footprint in Bootstrap 5 compared to version 4, and selective imports can shrink that further.

If your forms sit on a landing page (and they probably should, since WPForms found landing page forms convert at 23% versus 3% for popups), every kilobyte of CSS you cut improves load time and, by extension, your form conversions.

FAQ on Bootstrap Forms

What is the basic class for styling form inputs in Bootstrap?

The .form-control class is the foundation. Apply it to any text input, email field, password field, or textarea. It sets full width, consistent padding, border styling, and a blue focus ring across all browsers.

How do you create an inline form in Bootstrap 5?

Use the grid system with .row and .col-auto classes. Bootstrap 5 removed the old .form-inline class from version 4. The grid approach gives you better control over responsive breakpoints on smaller screens.

What changed in Bootstrap 5 forms compared to Bootstrap 4?

The .form-group class was dropped. Custom controls merged into .form-check. Floating labels arrived natively. jQuery was removed entirely. File inputs now use the standard .form-control class instead of custom markup.

How do floating labels work in Bootstrap?

Wrap your input and label inside a .form-floating div. The input must come before the label in the HTML. The label animates upward when the field receives focus or contains a value, using CSS sibling selectors.

How do you add validation styles to a Bootstrap form?

Add .is-valid or .is-invalid to inputs via JavaScript after checking their values. Pair these with .valid-feedback and .invalid-feedback elements. Use the novalidate attribute on the form to bypass default browser tooltips.

What is the difference between disabled and readonly in Bootstrap forms?

A disabled input is grayed out, non-interactive, and its value is excluded from form submission. A readonly input looks normal, prevents editing, but still submits its value. Use readonly when the server needs the data.

How do you build a multi-column form layout with Bootstrap?

Use Bootstrap’s 12-column grid inside your form. Wrap fields in .row and assign column classes like .col-md-6. Add gutter utilities such as .g-3 to control spacing between columns and rows.

What are Bootstrap input groups used for?

Input groups attach text, icons, or buttons to a form input. The .input-group wrapper with .input-group-text addons creates things like a dollar sign before a price field or a search button after a text input.

Does Bootstrap handle form accessibility automatically?

Not fully. Bootstrap provides the CSS structure, but you still need proper for attributes on labels, aria-describedby on inputs linked to help text, and meaningful error messages. Screen readers depend on these HTML attributes being set correctly.

Can you use Bootstrap forms with React or other JavaScript frameworks?

Yes. Libraries like React-Bootstrap and BootstrapVue provide framework-specific components that wrap Bootstrap’s form classes. You can also use the raw CSS classes directly on JSX elements or Vue templates without any wrapper library.

Conclusion

These Bootstrap forms examples cover what you actually need to build production-ready form layouts. Stacked, inline, horizontal, grid-based. Each pattern serves a different use case, and picking the wrong one usually shows up as broken spacing on mobile or confused users bouncing off your page.

The details matter more than most people think. Proper label associations, correct validation feedback, accessible readonly and disabled states. These aren’t extras. They directly affect completion rates and how assistive technologies like screen readers handle your forms.

Bootstrap 5 gives you a solid Sass-based system with responsive form controls, floating labels, and input groups that work across Chrome, Firefox, Safari, and Edge without custom CSS. Use the grid for complex layouts. Keep fields minimal. Test on real devices.

Start with the basic form template, then layer in components as your form requirements grow. Simple gets shipped. Complicated gets abandoned.