Lesson Content

1. Building Forms with Bootstrap Utilities

a. Overview

Definition: Forms are essential for collecting user input, and Bootstrap provides a variety of utility classes to style and structure them effectively.
Features: Responsive design, consistent styling, and easy integration of various form controls.

b. Basic Form Structure

Components: <form>, .form-group, <label>, <input>, <textarea>, <select>, .form-control, .btn
Example:

html
Copy code
<form>
  <div class="form-group">
    <label for="inputEmail">Email address</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

c. Responsive Form Layouts

Inline Forms: .form-inline to display form elements inline.
Horizontal Forms: Use Bootstrap’s grid system to align labels and inputs side by side.
Example: Inline Form

html
Copy code
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="inlineFormInputName2" class="sr-only">Name</label>
    <input type="text" class="form-control" id="inlineFormInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inlineFormInputGroupUsername2" class="sr-only">Username</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>
      </div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
    </div>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

2. Utilizing Bootstrap Utility Classes

a. Spacing Utilities

Margin and Padding: .mt-3, .mb-4, .p-2, etc., to control spacing around and within elements.
Example:

html
Copy code
<div class="mt-3 mb-4 p-2">
  This div has top margin 3, bottom margin 4, and padding 2.
</div>

b. Alignment Utilities

Text Alignment: .text-left, .text-center, .text-right
Flexbox Utilities: .d-flex, .justify-content-center, .align-items-center
Example: Centered Form

html
Copy code
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <form class="w-50">
    <!-- Form content -->
  </form>
</div>

c. Color Utilities

Background Colors: .bg-light, .bg-dark, etc.
Text Colors: .text-primary, .text-danger, etc.
Example: Styled Form Container

html
Copy code
<div class="bg-light p-4 rounded">
  <form>
    <!-- Form content -->
  </form>
</div>

3. Implementing Validation Classes

a. Overview

Definition: Bootstrap provides validation classes to indicate valid or invalid form inputs, enhancing user experience by providing immediate feedback.
Features: .is-valid, .is-invalid, .valid-feedback, .invalid-feedback

b. Validating Form Inputs

Example:

html
Copy code
<form>
  <div class="form-group">
    <label for="validationInput">Email address</label>
    <input type="email" class="form-control is-valid" id="validationInput" placeholder="Enter email" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="form-group">
    <label for="validationPassword">Password</label>
    <input type="password" class="form-control is-invalid" id="validationPassword" placeholder="Password" required>
    <div class="invalid-feedback">
      Please provide a valid password.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

c. Custom Validation Styles

Using JavaScript for Real-Time Validation:

html
Copy code
<form class="needs-validation" novalidate>
  <!-- Form fields -->
</form>

<script>
  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      var forms = document.getElementsByClassName('needs-validation');
      Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>

4. Combining Forms with Utility Classes for Enhanced UI

a. Example: Contact Form with Validation and Styling

html
Copy code
<div class="container mt-4">
  <h2>Contact Us</h2>
  <div class="bg-light p-4 rounded">
    <form class="needs-validation" novalidate>
      <div class="form-group">
        <label for="contactName">Name</label>
        <input type="text" class="form-control" id="contactName" placeholder="Enter your name" required>
        <div class="invalid-feedback">
          Please enter your name.
        </div>
      </div>
      <div class="form-group">
        <label for="contactEmail">Email address</label>
        <input type="email" class="form-control" id="contactEmail" placeholder="Enter email" required>
        <div class="invalid-feedback">
          Please enter a valid email address.
        </div>
      </div>
      <div class="form-group">
        <label for="contactMessage">Message</label>
        <textarea class="form-control" id="contactMessage" rows="3" required></textarea>
        <div class="invalid-feedback">
          Please enter your message.
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Send Message</button>
    </form>
  </div>
</div>

Day 9: Building Forms and User Interfaces with Bootstrap Utilities and Validation Classes