Lesson 19.05 — Components II: Forms, Modals, Alerts

Introduction

This lesson covers components that involve user interaction. Forms get consistent styling and built-in validation states. Modals and alerts are powered by Bootstrap's JavaScript, triggered declaratively with data-bs-* attributes — no custom script needed.

The modal and dismissible alert below work because this page loads the Bootstrap JS bundle at the bottom of the body.

Theory

Forms

.form-control — styles text inputs, textareas, selects.
.form-label — styles a label; pair its for with the input id.
.form-check + .form-check-input — checkboxes and radios.
Validation — add .is-valid / .is-invalid to the control and show feedback with .valid-feedback / .invalid-feedback.

Modals

A modal is a dialog layered over the page. Trigger it with a button using data-bs-toggle="modal" and data-bs-target="#id". The modal markup uses .modal > .modal-dialog > .modal-content with header/body/footer sections. Close buttons use data-bs-dismiss="modal".

Alerts

.alert plus a color (.alert-success, .alert-danger). Make it dismissible with .alert-dismissible and a close button carrying data-bs-dismiss="alert".

Real World Example

<!-- Trigger -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Open</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Hello</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Modal content here.</div>
    </div>
  </div>
</div>

Live demo:

Form with validation states:

Modal trigger:

Dismissible alert (click the ×):

Heads up — this alert can be dismissed.

Common Mistakes

Missing the JS bundle. Modals and dismissible alerts do nothing without Bootstrap's JavaScript.
Mismatched modal ids. The trigger's data-bs-target must equal the modal's id.
Skipping .form-label + for/id. This breaks accessibility — clicking the label should focus the input.
Using .alert without a color class. The alert needs a contextual class like .alert-info to look right.

Best Practices

Always associate labels with inputs for screen readers and easier clicking.
Keep modals focused on a single task; avoid stuffing whole pages into them.
Use server-side or JS validation for security — Bootstrap's classes are visual only.
Pick alert colors by meaning: success for confirmations, danger for errors.

Security note: when you display a validation message that echoes user input, set it with textContent (or render server-side with escaping) — never inject raw user input as HTML.

Practice Exercise

Build a login form with email and password inputs using .form-control and proper labels.
Add a "Subscribe" checkbox with .form-check.
Add a button that opens a modal confirming the form was submitted.
Show a dismissible success alert above the form.

Assignment

Create a "Contact us" widget:

A form with name, email, and message fields, each with a label and .form-control.
Mark one field invalid with .is-invalid and show .invalid-feedback.
A "Send" button that triggers a modal saying "Thanks for reaching out!".
A dismissible info alert at the top explaining response times.

Interview Questions

How do you open a Bootstrap modal without JavaScript? — With a trigger element using data-bs-toggle="modal" and data-bs-target="#modalId".
What class styles a text input? — .form-control.
How do you show a field as invalid? — Add .is-invalid to the control and a .invalid-feedback element for the message.
How do you make an alert dismissible? — Add .alert-dismissible and a close button with data-bs-dismiss="alert".
Is Bootstrap form validation enough for security? — No; it is visual only. Always validate on the server (and/or with JS) too.

Additional Resources

getbootstrap.com/docs/5.3/forms/overview — forms documentation
getbootstrap.com/docs/5.3/components/modal — modal reference
getbootstrap.com/docs/5.3/components/alerts — alert reference

Components II: Forms, Modals & Alerts