Material Bootstrap Forms

Examples and usage guidelines for form component styles, layout options, and custom components for creating a wide variety of forms.

Overview

Here’s a quick example to demonstrate Smart.Core’s form styles. Keep reading for documentation on required classes, form layout, and more.

We'll never share your email with anyone else.
Submit

Form components

Textual form components—like <input>s, <select>s, and <textarea>s—are styled with the .form-component class. Included are styles for general appearance, focus state, sizing, and more.

Sizing

Set heights using classes like .form-component-lg and .form-component-sm.

Readonly plain text

If you want to have <input readonly> elements in your form styled as plain text, use the .form-component-plaintext class to remove the default form field styling and preserve the correct margin and padding.

Range Inputs

Set horizontally scrollable range inputs using .form-component-range.

Checkboxes and radios

Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Disabled checkboxes and radios are supported. The disabled attribute will apply a lighter color to help indicate the input’s state.

Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our <input≶s and <label≶s are sibling elements as opposed to an <input≶ within a <label≶. This is slightly more verbose as you must specify id and for attributes to relate the <input≶ and <label≶.

Default (stacked)

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

Horizontal form

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and components. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form components..

Layout

Since Material Bootstrap applies display: block and width: 100% to almost all our form components, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Form groups

The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, components, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element.

Form grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

Form row

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-component-lg and .form-component-sm.

Radios
Checkbox

Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.

Inline forms

Use the .form-inline class to display a series of labels, form components, and buttons on a single horizontal row. Form components within inline forms vary slightly from their default states.

You may need to manually address the width and alignment of individual form components with spacing utilities (as shown below). Lastly, be sure to always include a <label> with each form component, even if you need to hide it from non-screenreader visitors with .sr-only.

@

Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

<input class="form-component" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Add the disabled attribute to a <fieldset> to disable all the components within.

Validation

Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.

How it works

Here’s how form validation works with Material Bootstrap:

With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.

Custom styles

For custom Material Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the :invalid and :valid styles applied to your form components.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.

Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form component.

Checkboxes and radios

The "bootstrap-check-box" and "bootstrap-radio-button" tags display checkboxes and radiobuttons.

Checkboxes

Check me

The following code should set the checkbox input to inditerminate state

Check me

Radios

Radio 1 Radio 2

Switches

The "bootstrap-switch-button" tag renders a custom switch.

Off On

Select menu

Custom <select> menus need only a custom class, .select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitatio

Range

Create custom <input type="range"> components with .range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

File browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.

Progress

The "bootstrap-progress" is the custom element which displays a Progress bar.




By adding the 'striped' attribute adds stripes to the progress.


Material Design

Switches


Off On

Radio Buttons


Off On

Checkbox


Off On

Range



Progress


Linear progress bar






Circular progress bar





Text Fields
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

Agree to terms and conditions
You must agree before submitting.