Modal structure and triggers in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a button that opens a modal when clicked.

Bootsrap

<button type="button" class="btn btn-primary" data-bs-toggle="[1]" data-bs-target="#exampleModal">
  Launch demo modal
</button>

Drag options to blanks, or click blank then click option'

Atooltip

Bmodal

Cdropdown

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dropdown' or 'tooltip' instead of 'modal' for the toggle attribute.

The attribute data-bs-toggle="modal" tells Bootstrap that this button will open a modal window.

2fill in blank

medium

Complete the modal container element with the correct class to define the modal dialog.

Bootsrap

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="[1]">
    <div class="modal-content">
      <!-- Modal content here -->
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Amodal-dialog

Bmodal-body

Cmodal-header

Dmodal-footer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal-body' or 'modal-header' instead of 'modal-dialog' for the dialog container.

The 'modal-dialog' class wraps the modal content and defines the modal's dialog box.

3fill in blank

hard

Fix the error in the modal close button by completing the attribute that dismisses the modal.

Bootsrap

<button type="button" class="btn-close" data-bs-[1]="modal" aria-label="Close"></button>

Drag options to blanks, or click blank then click option'

Aclose

Btoggle

Cdismiss

Dhide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'data-bs-toggle' or 'data-bs-hide' instead of 'data-bs-dismiss'.

The attribute data-bs-dismiss="modal" tells Bootstrap to close the modal when this button is clicked.

4fill in blank

hard

Fill both blanks to create a modal header with a title and a close button.

Bootsrap

<div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">[1]</h5>
  <button type="button" class="btn-close" data-bs-[2]="modal" aria-label="Close"></button>
</div>

Drag options to blanks, or click blank then click option'

AModal Title

Bdismiss

Ctoggle

DClose

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'toggle' instead of 'dismiss' for the close button attribute.

Putting 'Close' as the title text instead of a descriptive title.

The modal title is placed inside the

element, and the close button uses data-bs-dismiss="modal" to close the modal.

5fill in blank

hard

Fill all three blanks to create a modal with a button trigger, modal dialog, and close button.

Bootsrap

<button type="button" class="btn btn-primary" data-bs-toggle="[1]" data-bs-target="#myModal">
  Open Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
  <div class="[2]">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">My Modal</h5>
        <button type="button" class="btn-close" data-bs-[3]="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Content goes here.
      </div>
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Amodal

Bmodal-dialog

Cdismiss

Dtoggle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'toggle' instead of 'dismiss' for the close button.

Using wrong class names for the modal dialog container.

The button uses data-bs-toggle="modal" to open the modal, the dialog container uses class 'modal-dialog', and the close button uses data-bs-dismiss="modal" to close it.