3
7
  1. Dashboard
  2. Forms
  3. Form Control
General Form
First Last
@example.com
Add helper text with .form-text
  • Checkboxes
    Radios
    Inline Checkboxes
    Inline Radios
Submit Cancel
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 controls. Be sure to add .col-form-label to your labels as well so they’re vertically centered with their associated form controls.

  • Required
    [email protected]
    Street
    City
    State
    Zip
    Country
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Submit Cancel
Plain Text Form

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

Cancel
Sizing

Set heights using classes like .form-control-lg and .form-control-sm. Use .col-form-label-sm or .col-form-label-lg to your <label> or <legend> to correctly follow the size of .form-control-lg and .form-control-sm.

Submit Cancel
Validation

For custom 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.

  • Looks good!
    Name is required
    Looks good!
    Email is required
    Looks good!
    Username is required
    Looks good!
    Password is required
    Must agree to terms & conditions
Cancel
Validation Tooltips

Swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning.

Name cannot be empty
@example.com
Please provide a valid email
Choose a unique username
Cancel
Input Group

siQtheme License Github siQtheme NPM siQtheme

Copyright © 2019-2020 siQtheme by 3M Square. All rights reserved.