Close button component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap close button.

Bootsrap

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

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

ADismiss

BClose

CExit

DCancel

Attempts:

3 left

💡 Hint

Common Mistakes

Using labels like 'Dismiss' or 'Exit' which are less standard for close buttons.

Leaving aria-label empty or missing.

The aria-label attribute should describe the button's purpose for screen readers. The standard label for a close button is Close.

2fill in blank

medium

Complete the code to add a close button inside a Bootstrap alert.

Bootsrap

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning! Something went wrong.
  <button type="button" class="[1]" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

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

Abtn-close

Bclose-btn

Cclose-button

Dbtn-close-alert

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names that do not apply Bootstrap styles.

Omitting the btn-close class.

The Bootstrap class btn-close styles the button as a close icon. Other class names are not recognized by Bootstrap.

3fill in blank

hard

Fix the error in the close button code inside a modal header.

Bootsrap

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

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

Adialog

Bwindow

Cpopup

Dmodal

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect values like 'dialog' or 'popup' which do not trigger modal dismissal.

Leaving the attribute empty.

The data-bs-dismiss attribute should be set to modal to close the Bootstrap modal properly.

4fill in blank

hard

Fill both blanks to create a dismissible Bootstrap toast with a close button.

Bootsrap

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Notification</strong>
    <button type="button" class="[1]" data-bs-dismiss="[2]" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, this is a toast message.
  </div>
</div>

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

Abtn-close

Btoast

Calert

Dbtn-close-toast

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alert' or other values for dismissal which won't close the toast.

Using wrong class names for the button.

The close button uses the btn-close class. The data-bs-dismiss attribute must be set to toast to dismiss the toast component.

5fill in blank

hard

Fill all three blanks to create a Bootstrap modal with a close button in the header that dismisses the modal.

Bootsrap

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="[1]" data-bs-dismiss="[2]" aria-label="[3]"></button>
      </div>
      <div class="modal-body">
        Modal body content goes here.
      </div>
    </div>
  </div>
</div>

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

Abtn-close

Bmodal

CClose

Dbtn-close-modal

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names like 'btn-close-modal'.

Setting data-bs-dismiss to wrong values like 'dialog'.

Missing or incorrect aria-label.

The close button uses the btn-close class. The data-bs-dismiss attribute must be modal to close the modal. The aria-label should be Close for accessibility.