• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Modal

← Previous Next →

A modal is a dialog box or popup that appears on top of the main content, typically used for notifications, confirmations, or additional content without navigating away from the page. Bootstrap 4 modals are flexible, responsive, and fully customizable. They are commonly used for login forms, alerts, image previews, video popups, or additional details that need user interaction. Properly implemented modals enhance user experience by presenting information in a focused, visually prominent way.

Basic Modal Structure

A modal requires a container with the class modal and a unique id. Inside, the modal-dialog defines alignment, and modal-content holds the header, body, and footer.

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>This is the modal body content.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

  • modal fade adds a smooth animation.

  • tabindex="-1" removes the modal from normal tab order when hidden.

  • modal-dialog defines vertical and horizontal alignment.

  • modal-content contains the actual modal content.

Triggering a Modal

Modals are usually triggered with buttons or links using data-toggle="modal" and data-target="#exampleModal".

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch Modal
</button>

  • This allows modals to open without writing additional JavaScript.

  • Multiple triggers can open the same modal.

Modal Headers and Footers

Headers usually contain the title and a close button, while footers include action buttons like “Save” or “Cancel.”

  • modal-title is styled for semantic clarity.

  • close button with &times; ensures users can dismiss the modal easily.

  • Footers may have multiple buttons with primary and secondary styles.

Modal Body

The body holds main content, such as text, images, forms, or other interactive elements.

<div class="modal-body">
  <form>
    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" class="form-control" id="username" placeholder="Enter username">
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
  </form>
</div>

  • Forms inside modals keep users on the same page.

  • Scrollable content ensures usability even with long forms or media.

Modal Sizes

Bootstrap 4 supports different modal sizes:

  • modal-sm for small modals.

  • modal-lg for larger modals with more content.

  • modal-xl for extra-large modals in Bootstrap 4.4+.

<div class="modal-dialog modal-lg" role="document">

  • Proper sizing improves readability and avoids excessive white space.

Centered and Scrollable Modals

  • modal-dialog-centered vertically centers the modal.

  • modal-dialog-scrollable allows only the body to scroll while keeping header and footer fixed.

<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">

  • Centered modals are visually balanced, while scrollable modals improve accessibility for long content.

Additional Modal Options

  • data-backdrop="static" prevents the modal from closing when clicking outside.

  • data-keyboard="false" disables closing with the escape key.

  • These options are useful for critical confirmations or warnings.

Accessibility and Best Practices

  • Always include proper aria-labels and role="dialog" for screen readers.

  • Avoid placing too much content in a modal; use scrollable modals if necessary.

  • Test on small screens to ensure responsiveness.

  • Do not nest multiple modals; it may confuse users and break layouts.

  • Provide clear titles, concise content, and visible actions to maintain usability.

Real-World Use Cases

  • Login and registration forms without leaving the current page.

  • Alerting users about unsaved changes.

  • Previewing images or videos in an overlay.

  • Gathering user feedback or confirmation before critical actions.

Summary of the Tutorial

This tutorial covered Bootstrap 4 modals and their various features. You learned:

  • Structuring a modal with modal-header, modal-body, and modal-footer.

  • Triggering modals with buttons or links using data-toggle and data-target.

  • Adding headers, footers, and interactive content like forms or media.

  • Controlling modal size, vertical alignment, and scrollability.

  • Using additional options like data-backdrop and data-keyboard for critical scenarios.

  • Best practices for accessibility, responsiveness, and user experience.

Properly implemented modals improve interactivity and keep users engaged without navigating away from the page. They are a versatile component for websites and applications, offering a balance between functionality and user convenience.

Practice Questions

  1. Create a basic modal with a header, body, and footer containing a Close and Save button.

  2. Build a modal that opens when a button is clicked using data-toggle and data-target.

  3. Create a large modal using modal-lg that contains a simple form inside the body.

  4. Build a small modal using modal-sm with a message and a single Close button.

  5. Create a vertically centered modal using modal-dialog-centered that includes an image and description.

  6. Build a scrollable modal using modal-dialog-scrollable for a long list of items in the body.

  7. Create a modal that does not close when clicking outside by using data-backdrop="static".

  8. Build a modal that cannot be closed with the escape key using data-keyboard="false".

  9. Include a form inside a modal with input fields for username and password, and apply proper labels.

  10. Create a modal with multiple buttons in the footer, such as Cancel, Delete, and Save, with different button styles.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top