Bootstrap 4 Modal

Enhance user interaction on your website with Bootstrap 4 modals. Learn how to easily incorporate modal dialogs to display content, gather user input, or prompt actions.

Preview
Code

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

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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 content of the modal. You can put any HTML content here.</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>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

```
No Custom CSS
```
```
No need of JavaScript
```

Introducing our Bootstrap 4 Modal component, an essential tool for displaying interactive content and engaging user interactions on your website. Modals provide a modal dialog box that floats above the content and allows users to focus on specific tasks or information without navigating away from the current page.

Built on Bootstrap's flexible framework, our Modal component offers a sleek and responsive design that seamlessly integrates with any website layout. Whether you're showcasing images, videos, forms, or notifications, this component ensures a user-friendly and visually appealing modal experience.

Key Features:

Interactive Dialog: Present dynamic content, forms, or media within a modal dialog box that appears on top of the page content.
Customizable Styles: Personalize the modal's appearance using Bootstrap's utility classes, including sizes, animations, backgrounds, and modal headers, to match your website's design aesthetic.
Responsive Design: Ensure consistent functionality across desktops, tablets, and mobile devices with a modal that adapts fluidly to different screen sizes.
Easy Integration: Integrate the Bootstrap 4 Modal component effortlessly into your website's HTML and CSS, leveraging Bootstrap's components for quick deployment and customization.

Enhance user engagement and interaction on your website with our Bootstrap 4 Modal component. Whether you're creating call-to-action prompts, displaying detailed information, or implementing interactive forms, this modal provides a versatile and effective solution for improving user experience and functionality.

Steps to Copy the Code

Step 1: Copy the Code Snippet

Start by copying the HTML code snippet provided above. This snippet includes the necessary structure and scripts to create a modal using Bootstrap 4. Select the code, click the copy button, and paste it into your HTML file where you want the modal to appear.

Step 2: Link Bootstrap CSS

Ensure Bootstrap's CSS is linked correctly in your HTML document. Add the following <link> tag in the <head> section to import Bootstrap's stylesheet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

This link fetches Bootstrap's CSS file from the official Bootstrap CDN, ensuring your modal inherits Bootstrap's styling.

Step 3: Link jQuery

Bootstrap's JavaScript components, including modals, require jQuery. Add the following <script> tag before the closing </body> tag in your HTML document to import jQuery:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

Step 4: Link Bootstrap JavaScript File

Add the following <script> tag after jQuery to import Bootstrap's JavaScript file:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

These scripts enable Bootstrap's JavaScript components, including modals, to function properly.

Step 5: Customize and Make it Yours

Personalize the modal to align with your website's design and content requirements. Modify the modal title, content, footer buttons, and styles using Bootstrap's built-in classes or custom CSS and JavaScript. Customize modal behavior, such as animations or interaction triggers, to enhance user experience.

Code Explanation

Modal Trigger Button

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

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">: This button triggers the modal.
- type="button": Specifies that this is a button (not a submit button).
- class="btn btn-primary": Bootstrap classes for styling the button with a primary color.
- data-toggle="modal": Indicates that clicking this button will toggle (open/close) the modal.
- data-target="#exampleModal": Specifies the modal to be opened by targeting the element with id="exampleModal".

Modal Structure

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>This is the content of the modal. You can put any HTML content here.</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>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">: This div defines the modal structure.
- class="modal fade": Bootstrap classes for styling and behavior of a modal. fade adds a fade-in effect when the modal is displayed.
- id="exampleModal": Unique identifier for the modal, which is referenced by the trigger button (data-target="#exampleModal").
- tabindex="-1": Specifies that the modal can be focused using tab navigation (-1 means it's not included in the tab order).
- role="dialog": Specifies that this element is a dialog for accessibility purposes.
- aria-labelledby="exampleModalLabel": ARIA attribute specifying the ID of the element that serves as the title for the modal (<h5 class="modal-title" id="exampleModalLabel">).
- aria-hidden="true": ARIA attribute indicating that the modal is hidden from screen readers when closed.

Modal Content Sections

Modal Header: Contains the title and close button.
- <div class="modal-header">: Bootstrap class for styling the header of the modal.
- <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>: Title of the modal.
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">: Close button for the modal.
- data-dismiss="modal": Closes the modal when clicked.
- aria-label="Close": ARIA attribute providing a label for screen readers.
- <span aria-hidden="true">×</span>: Symbol (×) for close button, visually hidden but accessible to screen readers.
Modal Body: Contains the main content of the modal.
- <div class="modal-body">: Bootstrap class for styling the body of the modal.
- <p>This is the content of the modal. You can put any HTML content here.</p>: Content displayed within the modal body.
Modal Footer: Contains buttons for actions or closing the modal.
- <div class="modal-footer">: Bootstrap class for styling the footer of the modal.
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>: Secondary button to close the modal.
- data-dismiss="modal": Closes the modal when clicked.
- <button type="button" class="btn btn-primary">Save changes</button>: Primary button for performing an action (e.g., saving changes).