Modals bootstrap

Sure! Modals in Bootstrap 4 are used to create dialog boxes or popups. Here’s a basic explanation with examples using 4-space indentation.

Basic Structure of a Modal

Trigger Button: This button is used to open the modal.
Modal Structure: This contains the content of the modal, including header, body, and footer.

Example Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Modal Example</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <!-- Trigger Button -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Open Modal
    </button>

    <!-- Modal Structure -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Modal Title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!-- Modal Body -->
                <div class="modal-body">
                    This is the content of the modal.
                </div>
                <!-- Modal Footer -->
                <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>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Explanation

Trigger Button: The <button> with data-toggle="modal" and data-target="#myModal" is used to trigger the modal. The data-target attribute specifies the id of the modal to be opened.
Modal Structure:
- <div class="modal fade" id="myModal">: The modal class indicates that this is a modal. The fade class adds a fade animation. The id attribute should match the data-target of the trigger button.
- <div class="modal-dialog">: This is the container for the modal content.
- <div class="modal-content">: This wraps the header, body, and footer of the modal.
- Modal Header: Contains the title and a close button.
- Modal Body: The main content of the modal.
- Modal Footer: Contains action buttons like "Close" and "Save changes".

JavaScript and CSS

Make sure you include Bootstrap CSS and JavaScript libraries for the modal to work properly. In the example, these are included via CDN.

Feel free to customize the modal content and appearance according to your needs!

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Dropdowns

Next: Tooltips

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.