Why interactive components need JavaScript in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the button toggle the collapse content.

Bootsrap

<button class="btn btn-primary" type="button" data-bs-toggle="[1]" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle Content
</button>

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

Atooltip

Bmodal

Cdropdown

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' instead of 'collapse' will try to open a modal, not toggle content.

Using 'dropdown' or 'tooltip' will not toggle the collapse content.

The data-bs-toggle="collapse" attribute tells Bootstrap to toggle the collapse component when the button is clicked.

2fill in blank

medium

Complete the code to include the required JavaScript bundle for Bootstrap interactive components.

Bootsrap

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.[1]"></script>

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

Acss

Bjs

Cmap

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.css' will load styles, not scripts, so interactive features won't work.

Using '.map' or '.json' are not script files.

The JavaScript bundle file ends with .js to enable Bootstrap's interactive features.

3fill in blank

hard

Fix the error in the button code to make the dropdown work properly.

Bootsrap

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="[1]" aria-expanded="false">
  Dropdown button
</button>

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

Adropdown

Bmodal

Ccollapse

Dtooltip

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' or 'collapse' will cause the dropdown not to open.

Forgetting to add 'data-bs-toggle' attribute disables the dropdown.

The attribute data-bs-toggle="dropdown" is required to activate the dropdown menu on button click.

4fill in blank

hard

Fill both blanks to create a Bootstrap tooltip that appears on hover.

Bootsrap

<button type="button" class="btn btn-info" data-bs-toggle="[1]" data-bs-placement="[2]" title="Tooltip text">
  Hover me
</button>

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

Atooltip

Bpopover

Ctop

Dbottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'popover' instead of 'tooltip' changes the component type.

Choosing 'bottom' places the tooltip below instead of above.

Use data-bs-toggle="tooltip" to enable tooltips and data-bs-placement="top" to position it above the button.

5fill in blank

hard

Fill all three blanks to create a Bootstrap modal trigger button with correct attributes.

Bootsrap

<button type="button" class="btn btn-danger" data-bs-toggle="[1]" data-bs-target="#exampleModal" aria-[2]="true" aria-[3]="exampleModalLabel">
  Launch Modal
</button>

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

Amodal

Bexpanded

Clabelledby

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'collapse' instead of 'modal' will not open the modal.

Mixing up ARIA attribute names causes accessibility issues.

The button uses data-bs-toggle="modal" to open the modal. The ARIA attributes aria-expanded="true" and aria-labelledby="exampleModalLabel" improve accessibility by describing the modal state and label.

Practice

1. Why do Bootstrap interactive components like dropdowns and modals need JavaScript?

easy

A. To respond to user actions like clicks and show or hide content

B. To change the colors of the components automatically

C. To load images faster on the page

D. To make the page text larger

Solution

1. Step 1: Understand what interactive components do

   Interactive components like dropdowns open or close when clicked, so they need to respond to user actions.

2. Step 2: Identify the role of JavaScript in Bootstrap

   Bootstrap uses JavaScript to listen for clicks and then show or hide parts of the UI accordingly.

3. Final Answer:

   To respond to user actions like clicks and show or hide content -> Option A

4. Quick Check:

   JavaScript enables interaction = A [OK]

Hint: Interactive means responding to clicks, needs JavaScript [OK]

Common Mistakes:

• Thinking CSS alone can handle clicks
• Confusing JavaScript with styling
• Assuming images or text size need JavaScript here

2. Which of these is the correct way to include Bootstrap's JavaScript for interactive components?

easy

A. <script href='bootstrap.css'></script> in the <head>

B. <link href='bootstrap.js' rel='stylesheet'> in the <head>

C. <script src='bootstrap.js'></script> placed before closing </body>

D. <style>@import 'bootstrap.js';</style> in the <body>

Solution

1. Step 1: Identify how JavaScript files are included

   JavaScript files are included with <script src='...'></script> tags, usually before the closing </body> tag for better loading.

2. Step 2: Check the options for correct syntax and placement

   <script src='bootstrap.js'></script> placed before closing </body> uses <script src='bootstrap.js'></script> before </body>, which is correct. Others misuse <link> or <style> tags or mix CSS and JS.

3. Final Answer:

   <script src='bootstrap.js'></script> placed before closing </body> -> Option C

4. Quick Check:

   JavaScript files use <script src> tag [OK]

Hint: JS files use

Common Mistakes:

• Using <link> tag for JavaScript files
• Placing JS in <style> tags
• Wrong attribute like href in <script>

3. What will happen if you use a Bootstrap dropdown component without including Bootstrap's JavaScript?

medium

A. The dropdown menu will open and close normally on click

B. The dropdown menu will show an error message

C. The dropdown menu will open automatically on page load

D. The dropdown menu will not open when clicked

Solution

1. Step 1: Understand Bootstrap dropdown behavior

   Bootstrap dropdowns rely on JavaScript to toggle the menu visibility when clicked.

2. Step 2: Predict behavior without JavaScript

   Without JavaScript, the click event is not handled, so the dropdown menu stays hidden and does not open.

3. Final Answer:

   The dropdown menu will not open when clicked -> Option D

4. Quick Check:

   No JS means no toggle = B [OK]

Hint: No JS means no click response for dropdowns [OK]

Common Mistakes:

• Thinking CSS alone opens dropdowns
• Assuming dropdown opens automatically
• Expecting error messages from missing JS

4. You added a Bootstrap modal component but clicking the button does nothing. What is the most likely cause?

medium

A. You placed the modal code outside the <body> tag

B. You forgot to include Bootstrap's JavaScript file

C. You did not add the alt attribute to images

D. You used the wrong CSS class for the button

Solution

1. Step 1: Identify the role of JavaScript in modals

   Bootstrap modals require JavaScript to open and close when buttons are clicked.

2. Step 2: Analyze the problem of button click doing nothing

   If clicking the button does nothing, the likely cause is missing JavaScript that handles the modal toggle.

3. Final Answer:

   You forgot to include Bootstrap's JavaScript file -> Option B

4. Quick Check:

   Modal needs JS to open = D [OK]

Hint: No modal action? Check if JS file is included [OK]

Common Mistakes:

• Blaming CSS classes for no click response
• Confusing image alt attributes with modals
• Ignoring the need for JS in modals

5. You want a Bootstrap tooltip to show on hover, but it only appears after clicking the element. What should you do to fix this?

hard

A. Initialize the tooltip with JavaScript specifying trigger as 'hover'

B. Add a CSS class to make the tooltip always visible

C. Remove the JavaScript file to let CSS handle it

D. Use a <button> instead of <div> for the tooltip

Solution

1. Step 1: Understand tooltip triggers in Bootstrap

   Bootstrap tooltips need JavaScript initialization to specify how they appear, like on hover or click.

2. Step 2: Fix tooltip behavior by setting trigger option

   By initializing the tooltip with JavaScript and setting trigger to 'hover', it will show on mouse hover instead of click.

3. Final Answer:

   Initialize the tooltip with JavaScript specifying trigger as 'hover' -> Option A

4. Quick Check:

   Tooltip trigger set by JS = C [OK]

Hint: Set tooltip trigger in JS to 'hover' for hover effect [OK]

Common Mistakes:

• Trying to show tooltip with CSS only
• Removing JS file thinking it helps
• Changing element type without JS initialization