0
0
Bootsrapmarkup~30 mins

Modal structure and triggers in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Bootstrap Modal Structure and Triggers
📖 Scenario: You are creating a simple webpage that uses Bootstrap to show a modal popup. This modal will display a welcome message when the user clicks a button.
🎯 Goal: Build a Bootstrap modal with a button that opens it. The modal should have a header, body text, and a close button.
📋 What You'll Learn
Use Bootstrap 5 modal structure
Create a button that triggers the modal
Include modal header with a title
Include modal body with a welcome message
Include modal footer with a close button
💡 Why This Matters
🌍 Real World
Modals are common in websites for showing dialogs, alerts, forms, or extra information without leaving the current page.
💼 Career
Knowing how to implement modals with Bootstrap is useful for front-end developers to create interactive and user-friendly interfaces quickly.
Progress0 / 4 steps
1
Create the basic HTML structure with Bootstrap CSS link
Write the basic HTML5 skeleton with lang="en", charset="UTF-8", and viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Add an empty <body> section.
Bootsrap
Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section.

2
Add a button that triggers the modal
Inside the <body>, add a Bootstrap button with type="button", class btn btn-primary, and attributes data-bs-toggle="modal" and data-bs-target="#welcomeModal". The button text should be Open Modal.
Bootsrap
Need a hint?

Use data-bs-toggle="modal" and data-bs-target="#welcomeModal" on the button to link it to the modal.

3
Add the modal HTML structure
Below the button, add a <div> with class="modal fade" and id="welcomeModal". Inside it, add div elements with classes modal-dialog and modal-content. Inside modal-content, add modal-header with a h5 title Welcome and a close button with data-bs-dismiss="modal". Add modal-body with the text Welcome to our website!. Add modal-footer with a close button that also dismisses the modal.
Bootsrap
Need a hint?

Use the Bootstrap modal structure with correct classes and data-bs-dismiss="modal" on close buttons.

4
Add Bootstrap JavaScript bundle for modal functionality
Before the closing </body> tag, add the Bootstrap 5 JavaScript bundle CDN script tag with src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js". This enables the modal to open and close properly.
Bootsrap
Need a hint?

Include the Bootstrap JavaScript bundle before the closing </body> tag to enable modal functionality.