Bootstrap Forms

Bootstrap Forms
Nikhil
Published on 2021-07-24 13:02:56

Forms

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

Forms

  • Form control - Style textual inputs and textareas with support for multiple states.
  • Select - Improve browser default select elements with a custom initial appearance.
  • Checks & radios - Use our custom radio buttons and checkboxes in forms for selecting input options.
  • Range - Replace browser default range inputs with our custom version.
  • Input group - Attach labels and buttons to your inputs for increased semantic value.
  • Floating labels - Create beautifully simple form labels that float over your input fields.
  • Layout - Create inline, horizontal, or complex grid-based layouts with your forms.
  • Validation -Validate your forms with custom or native validation behaviors and styles.

The form controls in Bootstrap extend our Rebooted form designs with classes. For a more uniform rendering across browsers and devices, use these classes to opt into their specialized displays.

To take advantage of modern input controls like email verification, number selection, and more, make sure all inputs have the appropriate type attribute (e.g., email for an email address or number for numerical data).

Here's a simple example of how to use the form styles in Bootstrap. Continue reading for information on necessary classes, form formatting, and other topics.

Example:

<form>
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form text

Block-level or inline-level form text can be created using .form-text.

Form text below inputs can be styled with .form-text. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.

Example:

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Inline text can use any typical inline HTML element (be it a <span><small>, or something else) with nothing more than the .form-text class.

<div class="row g-3 align-items-center">
    <div class="col-auto">
        <label for="inputPassword6" class="col-form-label">Password</label>
    </div>
    <div class="col-auto">
        <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
    </div>
    <div class="col-auto">
        <span id="passwordHelpInline" class="form-text">
            Must be 8-20 characters long.
        </span>
    </div>
</div>

Disabled forms

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

Example

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

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website