components-interactive - bootstrap-5 Interview Questions | Preplance

1. Describe how to build a responsive navbar that collapses into a toggler on mobile.

Difficulty: MediumType: SubjectiveTopic: navbar

Start with the navbar element and add .navbar-expand followed by your chosen breakpoint. Add a brand, a toggler button with data-bs-toggle='collapse', and data-bs-target linking to the collapsible menu. Wrap the menu links inside a div with the class .collapse and the same id. On small screens the menu hides behind the toggler, and it expands automatically at the defined breakpoint.

Example code

<nav class='navbar navbar-expand-md navbar-light bg-light'>
 <a class='navbar-brand' href='#'>Brand</a>
 <button class='navbar-toggler' data-bs-toggle='collapse' data-bs-target='#mainNav'>
 <span class='navbar-toggler-icon'></span>
 </button>
 <div id='mainNav' class='collapse navbar-collapse'>
 <ul class='navbar-nav ms-auto'>
 <li class='nav-item'><a class='nav-link' href='#'>Home</a></li>
 </ul>
 </div>
</nav>

2. Which library does Bootstrap 5 use for dropdown and tooltip positioning?

Difficulty: MediumType: MCQTopic: setup

Bootstrap 5 removed the dependency on jQuery but still uses Popper to handle the smart positioning and placement of dropdowns and tooltips.

3. How do you ensure a dropdown is keyboard friendly and screen reader friendly?

Difficulty: MediumType: SubjectiveTopic: dropdowns

Always use a button as the dropdown toggle so it can receive focus and support keyboard actions. Bootstrap automatically adds aria-expanded and manages focus inside the menu. Keep menu items as real links or buttons with clear labels. Close the dropdown on Escape, and for long menus, group related items with headers for better navigation.

Example code

<button class='btn btn-secondary dropdown-toggle' data-bs-toggle='dropdown' aria-expanded='false'>Actions</button>

4. Which data attribute toggles a collapsible element in Bootstrap 5?

Difficulty: EasyType: MCQTopic: collapse

In Bootstrap 5, use the attribute data-bs-toggle set to 'collapse' on the trigger element. Combine it with data-bs-target to link to the collapsible content you want to show or hide.

Example code

<button class='btn btn-primary' data-bs-toggle='collapse' data-bs-target='#faq1'>Toggle</button>
<div id='faq1' class='collapse'>Answer text</div>

5. Which class makes the navbar expand at large screens and collapse below that?

Difficulty: EasyType: MCQTopic: navbar

Use the class .navbar-expand-lg to make the navbar collapse on smaller screens and expand from large screens (LG) and above. The breakpoint decides when the menu turns into a toggler.

Example code

<nav class='navbar navbar-expand-lg navbar-light bg-light'>...</nav>

6. Which attribute connects a button to a modal by its id?

Difficulty: EasyType: MCQTopic: modal

Use data-bs-target to link the button with the modal id, and set data-bs-toggle to 'modal' to activate it. Together they open the correct modal when clicked.

Example code

<button class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#myModal'>Open</button>

7. Which class wraps the dropdown menu items?

Difficulty: MediumType: MCQTopic: dropdowns

Use the class .dropdown-menu to contain all dropdown items. The toggle element controls its visibility and positioning using Bootstrap’s dropdown script.

Example code

<div class='dropdown'>
 <button class='btn btn-secondary dropdown-toggle' data-bs-toggle='dropdown'>Menu</button>
 <ul class='dropdown-menu'><li><a class='dropdown-item' href='#'>Item</a></li></ul>
</div>

8. Which attribute closes a modal when the button is clicked?

Difficulty: MediumType: MCQTopic: dismiss

Bootstrap 5 uses the attribute data-bs-dismiss. Set its value to 'modal', 'toast', or 'alert' depending on which component you want to close automatically.

Example code

<button class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>

9. Which attribute marks an element as a tooltip trigger in Bootstrap 5?

Difficulty: MediumType: MCQTopic: tooltip

Add data-bs-toggle='tooltip' to the element and provide a title for the text you want displayed. Initialize tooltips with JavaScript to make them functional.

Example code

const btn = document.querySelector('[data-bs-toggle="tooltip"]');
new bootstrap.Tooltip(btn);

10. Which attribute starts a carousel cycling automatically?

Difficulty: MediumType: MCQTopic: carousel

Use data-bs-ride='carousel' to make the carousel start cycling automatically. You can also control the timing between slides with data-bs-interval.

Example code

<div id='hero' class='carousel slide' data-bs-ride='carousel'>...</div>

11. Which base class creates an offcanvas panel?

Difficulty: MediumType: MCQTopic: offcanvas

The class .offcanvas is the base for offcanvas panels. You can control placement using modifiers such as .offcanvas-start or .offcanvas-end depending on the side you want it to appear from.

Example code

<div class='offcanvas offcanvas-start' id='filters'>...</div>

12. When should you use a modal versus an offcanvas in Bootstrap 5?

Difficulty: MediumType: SubjectiveTopic: offcanvas

Use a modal for focused actions that require user attention, such as confirming a delete or editing profile details. It appears centered and blocks background interaction. Use an offcanvas for side panels like filters, navigation, or shopping carts. It slides from a side and feels less intrusive. Choose based on how much focus the task requires.

13. How do you properly enable tooltips and keep them accessible?

Difficulty: MediumType: SubjectiveTopic: tooltip

Add data-bs-toggle='tooltip' and a clear title attribute for the tooltip text. Initialize all tooltip elements with JavaScript after the DOM loads. You can enable multiple tooltips with one call. Avoid using tooltips for essential information since they may not appear on touch devices. Use aria-labels for critical labels to improve accessibility.

Example code

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));

14. Explain when to use toasts versus alerts, and how to place toasts on a page.

Difficulty: MediumType: SubjectiveTopic: toast-usage

Use toasts for brief, non-blocking notifications like 'Saved' or 'Copied'. They appear and disappear automatically. Use alerts when you want persistent messages that users can read or dismiss manually. Place toasts in a fixed corner container and add role='status' with aria-live='polite' so screen readers announce them without interrupting focus.

Example code

<div class='toast-container position-fixed top-0 end-0 p-3'>
 <div class='toast show' role='status' aria-live='polite'><div class='toast-body'>Saved</div></div>
</div>

15. What are best practices for a carousel in terms of performance and accessibility?

Difficulty: MediumType: SubjectiveTopic: carousel

Use lightweight images and moderate intervals to keep performance smooth. Pause autoplay on hover and provide visible navigation controls. On mobile, prefer manual swipe gestures over constant auto-rotation. Add aria labels to controls and alt text to images. If the carousel content is essential, consider using a static layout instead to avoid accessibility issues.

Example code

<div id='hero' class='carousel slide' data-bs-ride='carousel' data-bs-interval='4000'>...</div>

Master Interviews
Anywhere, Anytime

Components — Interactive – Bootstrap 5 interview questions

Set overview

Bootstrap 5 – Components — Interactive questions (15)

1. Describe how to build a responsive navbar that collapses into a toggler on mobile.

Continue your preparation

2. Which library does Bootstrap 5 use for dropdown and tooltip positioning?

3. How do you ensure a dropdown is keyboard friendly and screen reader friendly?

4. Which data attribute toggles a collapsible element in Bootstrap 5?

5. Which class makes the navbar expand at large screens and collapse below that?

6. Which attribute connects a button to a modal by its id?

7. Which class wraps the dropdown menu items?

8. Which attribute closes a modal when the button is clicked?

9. Which attribute marks an element as a tooltip trigger in Bootstrap 5?

10. Which attribute starts a carousel cycling automatically?

11. Which base class creates an offcanvas panel?

12. When should you use a modal versus an offcanvas in Bootstrap 5?

13. How do you properly enable tooltips and keep them accessible?

14. Explain when to use toasts versus alerts, and how to place toasts on a page.

15. What are best practices for a carousel in terms of performance and accessibility?

More sets in Bootstrap 5

Explore related subjects

Master Interviews Anywhere, Anytime

Components — Interactive – Bootstrap 5 interview questions

Set overview

1. Describe how to build a responsive navbar that collapses into a toggler on mobile.

Continue your preparation

2. Which library does Bootstrap 5 use for dropdown and tooltip positioning?

3. How do you ensure a dropdown is keyboard friendly and screen reader friendly?

4. Which data attribute toggles a collapsible element in Bootstrap 5?

5. Which class makes the navbar expand at large screens and collapse below that?

6. Which attribute connects a button to a modal by its id?

7. Which class wraps the dropdown menu items?

8. Which attribute closes a modal when the button is clicked?

9. Which attribute marks an element as a tooltip trigger in Bootstrap 5?

10. Which attribute starts a carousel cycling automatically?

11. Which base class creates an offcanvas panel?

12. When should you use a modal versus an offcanvas in Bootstrap 5?

13. How do you properly enable tooltips and keep them accessible?

14. Explain when to use toasts versus alerts, and how to place toasts on a page.

15. What are best practices for a carousel in terms of performance and accessibility?

More sets in Bootstrap 5

Explore related subjects

Master Interviews
Anywhere, Anytime