1. What is Bootstrap mainly used for?
Difficulty: EasyType: MCQTopic: setup
- Back-end development
- Responsive front-end design
- Database management
- Server deployment
Bootstrap is a front-end framework for building responsive and mobile-first websites quickly. It provides ready CSS and JavaScript components for layout and UI design.
Correct Answer: Responsive front-end design
2. Which version of Bootstrap dropped support for jQuery?
Difficulty: EasyType: MCQTopic: version
- Bootstrap 3
- Bootstrap 4
- Bootstrap 5
- Bootstrap 6
Bootstrap 5 removed the jQuery dependency and replaced it with vanilla JavaScript for faster and lighter performance.
Correct Answer: Bootstrap 5
3. Which tag is used to link the Bootstrap CSS file from CDN?
Difficulty: EasyType: MCQTopic: setup
- <script>
- <link>
- <style>
- <css>
The link tag is used to include the Bootstrap CSS file in the head section of HTML. The script tag is for JavaScript files.
Correct Answer: <link>
Example Code
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' rel='stylesheet'>
4. Which class provides a responsive fixed width container in Bootstrap 5?
Difficulty: MediumType: MCQTopic: container
- .container-fluid
- .container
- .wrapper
- .container-box
The .container class gives a responsive fixed width layout that adapts to breakpoints. The .container-fluid class always spans the full width.
Correct Answer: .container
Example Code
<div class='container'>Your content here</div>
5. How many columns does the Bootstrap grid system use?
Difficulty: MediumType: MCQTopic: grid
Bootstrap uses a 12-column grid system that allows flexible layouts across screen sizes by dividing the page into equal columns.
Correct Answer: 12
6. Which breakpoint in Bootstrap 5 targets large devices like desktops?
Difficulty: MediumType: MCQTopic: grid
The lg breakpoint targets large devices, usually with a width of 992 pixels and above. Bootstrap provides responsive classes for each size.
Correct Answer: lg
7. Which class creates a primary styled button in Bootstrap 5?
Difficulty: EasyType: MCQTopic: buttons
- .btn-blue
- .button-primary
- .btn btn-primary
- .primary-btn
In Bootstrap 5, buttons use the .btn class along with a variant like .btn-primary to define color and style.
Correct Answer: .btn btn-primary
Example Code
<button class='btn btn-primary'>Click</button>
8. Which utility class adds margin at the top of an element in Bootstrap 5?
Difficulty: MediumType: MCQTopic: utilities
.mt-3 applies margin-top spacing. The m stands for margin, t for top, and 3 for the spacing unit.
Correct Answer: .mt-3
Example Code
<div class='mt-3'>Top space added</div>
9. Does Bootstrap 5 include icons by default?
Difficulty: MediumType: MCQTopic: icons
- Yes
- No
- Only in premium version
- Only with jQuery
Bootstrap 5 does not bundle icons by default. Developers can use the separate Bootstrap Icons library or other icon sets like Font Awesome.
Correct Answer: No
10. Which class is used to create a responsive navigation bar in Bootstrap 5?
Difficulty: MediumType: MCQTopic: nav
- .navbar
- .navmenu
- .navigation
- .navbar-wrapper
The .navbar class creates a responsive navigation header. It can contain brand, links, and toggler for collapsing menus.
Correct Answer: .navbar
Example Code
<nav class='navbar navbar-expand-lg navbar-light bg-light'>...</nav>
11. How do you include Bootstrap 5 in a project using CDN and why is it useful?
Difficulty: EasyType: SubjectiveTopic: setup
You can include Bootstrap 5 by adding link and script tags from the CDN in your HTML. This method is quick and doesn't require downloading files. Browsers often cache CDN resources, so pages load faster across websites that use the same CDN link.
Example Code
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' rel='stylesheet'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js'></script>
12. What does 'mobile-first' mean in Bootstrap?
Difficulty: MediumType: SubjectiveTopic: mobile-first
Mobile-first means the design starts from small screens and scales up for larger devices. Bootstrap's CSS is built for phones first, and responsive breakpoints apply styles as screen size increases. This approach ensures better performance and usability on mobile devices.
13. Explain the difference between .container and .container-fluid classes.
Difficulty: MediumType: SubjectiveTopic: container
.container provides a fixed-width layout that adapts to breakpoints, while .container-fluid always spans the full width of the viewport. Use .container for centered content and .container-fluid when you need a layout that covers the entire screen width.
Example Code
<div class='container'>Centered content</div>
<div class='container-fluid'>Full width content</div>
14. How does the grid system work in Bootstrap 5?
Difficulty: MediumType: SubjectiveTopic: grid
The grid system divides a page into 12 columns. You wrap columns inside a .row inside a .container or .container-fluid. Each column uses classes like .col-sm-6 or .col-md-4 to define width across devices. The system ensures responsive alignment and stacking automatically.
Example Code
<div class='container'><div class='row'><div class='col-sm-6'>Half</div><div class='col-sm-6'>Half</div></div></div>
15. What are some key differences between Bootstrap 4 and 5?
Difficulty: MediumType: SubjectiveTopic: version
Bootstrap 5 removed jQuery, added CSS custom properties, introduced the new utility API, improved grid and forms, and added a new offcanvas component. Internet Explorer support was dropped, making it modern and lighter for today's browsers.
16. How many total columns are available in Bootstrap’s grid system?
Difficulty: EasyType: MCQTopic: grid
Bootstrap uses a 12-column grid layout that allows you to combine or split columns easily. It makes responsive layouts simple and flexible.
Correct Answer: 12
17. Which class must wrap all rows in a Bootstrap grid?
Difficulty: EasyType: MCQTopic: structure
- .wrapper
- .container
- .grid
- .layout
Rows must be placed inside a container or container-fluid to keep content aligned and add the correct padding for the grid system.
Correct Answer: .container
Example Code
<div class='container'><div class='row'></div></div>
18. Which class represents a horizontal group of columns?
Difficulty: EasyType: MCQTopic: grid
- .row
- .col
- .grid-row
- .columns
Rows act as wrappers for columns. They ensure proper negative margins and alignment so columns sit correctly in the grid.
Correct Answer: .row
Example Code
<div class='row'><div class='col'>...</div></div>
19. What will happen if you add more than 12 columns in a single row?
Difficulty: MediumType: MCQTopic: grid
- They overflow
- They wrap to the next line
- They shrink to fit
- They disappear
Bootstrap automatically wraps columns that exceed 12 units to a new line. This keeps layouts consistent across devices.
Correct Answer: They wrap to the next line
Example Code
<div class='row'><div class='col-8'></div><div class='col-8'></div></div>
20. Which class makes a column take half width on medium devices?
Difficulty: MediumType: MCQTopic: grid
- .col-6
- .col-sm-6
- .col-md-6
- .col-lg-6
The prefix md means medium breakpoint. A class .col-md-6 makes the element occupy 6 out of 12 columns on medium screens and above.
Correct Answer: .col-md-6
Example Code
<div class='col-md-6'>Half width</div>
21. What does the class .col without a number mean?
Difficulty: MediumType: MCQTopic: grid
- Fixed width
- Auto width
- Hidden column
- Full width
.col lets Bootstrap automatically distribute equal width columns within the row. It adapts according to available space.
Correct Answer: Auto width
Example Code
<div class='row'><div class='col'>One</div><div class='col'>Two</div></div>
22. How can you nest a grid inside another grid?
Difficulty: MediumType: MCQTopic: grid
- You cannot nest grids
- Add a new row inside a column
- Use nested-container class
- Use subgrid property
To nest grids, place a new .row inside a .col. This creates an independent grid within that column for more complex layouts.
Correct Answer: Add a new row inside a column
Example Code
<div class='col'><div class='row'><div class='col'>Nested</div></div></div>
23. Which class is used to shift columns to the right in Bootstrap?
Difficulty: MediumType: MCQTopic: grid
- .move-right
- .col-offset
- .offset-md-3
- .pull-md-3
Offset classes like .offset-md-3 create left margin space equal to 3 columns. It visually pushes the column to the right.
Correct Answer: .offset-md-3
Example Code
<div class='col-md-3 offset-md-3'></div>
24. Which class vertically centers columns inside a row using flexbox?
Difficulty: MediumType: MCQTopic: grid
- .align-items-center
- .v-center
- .justify-center
- .center-cols
Rows in Bootstrap use flexbox. The class .align-items-center centers items vertically within the row.
Correct Answer: .align-items-center
Example Code
<div class='row align-items-center'>...</div>
25. How can you change the order of columns on different screen sizes?
Difficulty: MediumType: MCQTopic: grid
- Using .shift class
- Using .order utilities
- Using .move utilities
- Not possible
Bootstrap provides .order-* classes like .order-1 or .order-md-2 to rearrange columns responsively without changing HTML order.
Correct Answer: Using .order utilities
Example Code
<div class='col order-2 order-md-1'></div>
26. Explain the use of the row-cols utility in Bootstrap 5.
Difficulty: MediumType: SubjectiveTopic: grid
The row-cols utility allows you to define how many columns should appear in a row automatically. For example, .row-cols-3 divides each row into three equal columns without specifying .col classes for each item. It’s useful for card layouts and grids that adjust dynamically.
Example Code
<div class='row row-cols-3'><div class='col'>A</div><div class='col'>B</div><div class='col'>C</div></div>
27. List all Bootstrap 5 responsive breakpoints with their widths.
Difficulty: MediumType: SubjectiveTopic: grid
Bootstrap 5 defines these breakpoints: Extra small (xs) for below 576 pixels, Small (sm) for 576 and above, Medium (md) for 768 and above, Large (lg) for 992 and above, Extra large (xl) for 1200 and above, and Extra extra large (xxl) for 1400 and above. These help apply classes that match screen sizes precisely.
28. Describe the difference between .container and .container-fluid in layout building.
Difficulty: MediumType: SubjectiveTopic: container
.container provides a fixed-width layout that changes with breakpoints, making content centered with side padding. .container-fluid always takes the full width of the viewport. Choose .container for traditional centered designs and .container-fluid for edge-to-edge layouts.
Example Code
<div class='container'>Fixed</div><div class='container-fluid'>Full width</div>
29. How do you properly nest a grid and why is nesting important?
Difficulty: MediumType: SubjectiveTopic: grid
To nest a grid, place a new row inside an existing column. This allows sub-layouts inside sections like cards or sidebars. Nesting gives you precise control over complex designs while keeping alignment consistent with Bootstrap’s spacing system.
Example Code
<div class='col'><div class='row'><div class='col'>Nested area</div></div></div>
30. Explain horizontal and vertical alignment options for Bootstrap grids.
Difficulty: MediumType: SubjectiveTopic: grid
Bootstrap grids use flex utilities. For horizontal alignment, use justify-content classes like .justify-content-center or .justify-content-between. For vertical alignment, use .align-items-center or .align-self-end. These make layouts clean and responsive without custom CSS.
Example Code
<div class='row justify-content-center align-items-center'>...</div>
31. Which class applies the H1 heading style to any element?
Difficulty: EasyType: MCQTopic: headings
- .display-1
- .h1
- .heading-1
- .title-1
Use dot h one to get the visual style of an H1 on any tag. It changes only the look, not the semantic meaning. For accessibility, keep real heading tags where structure matters.
Correct Answer: .h1
Example Code
<p class='h1'>Hero title look</p>
32. Which class gives you the largest hero style heading?
Difficulty: EasyType: MCQTopic: display
- .display-4
- .display-3
- .display-2
- .display-1
Display headings are extra large, great for hero sections. Display one is the biggest. They are purely visual helpers and work well with responsive spacing utilities.
Correct Answer: .display-1
Example Code
<h1 class='display-1'>Big landing title</h1>
33. Which class is used to style an introductory paragraph?
Difficulty: EasyType: MCQTopic: text-helpers
- .intro
- .lead
- .summary
- .para-lg
Dot lead makes a paragraph slightly larger with relaxed line height. It draws attention to the first line of copy, like a summary under a headline.
Correct Answer: .lead
Example Code
<p class='lead'>This is a short compelling intro.</p>
34. Which class sets a subtle, de-emphasized text color?
Difficulty: EasyType: MCQTopic: text-helpers
- .text-secondary
- .text-muted
- .text-gray
- .text-soft
Dot text dash muted lowers emphasis without breaking contrast too much. It is handy for meta info like timestamps and helper notes.
Correct Answer: .text-muted
Example Code
<small class='text-muted'>Updated 2 hours ago</small>
35. Which utility adds vertical padding of size 3?
Difficulty: MediumType: MCQTopic: utilities
P stands for padding. Y targets top and bottom. The number is the scale step. So dot p y three adds balanced vertical space without extra CSS.
Correct Answer: .py-3
Example Code
<div class='py-3'>Comfortable vertical padding</div>
36. How do you center a fixed-width block horizontally?
Difficulty: MediumType: MCQTopic: utilities
- .mx-center
- .mx-auto
- .text-center
- .justify-content-center
Dot m x auto sets left and right margins to auto. With a width set, the block centers in its container. It is a classic layout trick made easy.
Correct Answer: .mx-auto
Example Code
<div class='mx-auto' style='width: 300px;'>Centered card</div>
37. Which class prevents text from wrapping to the next line?
Difficulty: MediumType: MCQTopic: text-helpers
- .text-wrap
- .text-nowarp
- .text-nowrap
- .no-wrap
Dot text dash nowrap keeps content on one line. Use it with width control or overflow helpers to avoid awkward horizontal scroll.
Correct Answer: .text-nowrap
Example Code
<span class='text-nowrap'>Order ID: 2025-00001</span>
38. Which utility hides content visually but keeps it available to screen readers?
Difficulty: MediumType: MCQTopic: visually-hidden
- .d-none
- .invisible
- .sr-only
- .visually-hidden
Dot visually dash hidden is the modern helper for accessible hidden text. It replaces older S R only patterns. Great for labels that should not show visually.
Correct Answer: .visually-hidden
Example Code
<span class='visually-hidden'>Open navigation menu</span>
39. Which utility hides an element on all screen sizes?
Difficulty: MediumType: MCQTopic: display
- .invisible
- .d-none
- .d-block
- .d-hide
Dot d dash none sets display to none. The element is removed from layout and from assistive tech. For responsive show or hide, combine with breakpoint variants like d dash md dash block.
Correct Answer: .d-none
Example Code
<div class='d-none d-md-block'>Show on md and above</div>
40. When should you use .h1 versus real <h1> and when would you use .display-1?
Difficulty: MediumType: SubjectiveTopic: headings
Use a real H one when the element is a true page heading. It defines document structure and helps screen readers. The dot h one class only copies the look. It is fine for decorative titles inside cards where a real heading level might not fit.
Display one is for big hero titles. It is a visual style that is larger and lighter. Use it when you want drama at the top of a page, but keep the semantic heading tag for structure.
Example Code
<h1 class='display-1'>Product</h1>
<p class='h1'>Card title look</p>
41. What are utility classes in Bootstrap and why are they popular?
Difficulty: EasyType: SubjectiveTopic: utilities
Utility classes are tiny single purpose helpers, like spacing, colors, display, and text alignment. You compose them in HTML to style without writing new CSS files.
They are popular because they speed up work and keep designs consistent. You make small changes close to the markup, avoid cascade surprises, and reduce custom CSS debt.
Example Code
<div class='p-3 bg-light text-center'>Hello utilities</div>
42. Explain the spacing scale (0–5) and how responsive spacing works.
Difficulty: MediumType: SubjectiveTopic: utilities
Bootstrap uses a simple scale from zero to five. Each step maps to a rem value. For example, m dash three means medium margin, and p y dash two means top and bottom padding set to step two.
You can add breakpoints in the class name. For example, m d dash four applies from medium screens up. This keeps spacing comfortable on large screens and tight on small ones.
Example Code
<div class='p-2 p-md-4 my-3'>Adaptive spacing</div>
43. How do you truncate long text with ellipsis correctly?
Difficulty: MediumType: SubjectiveTopic: text-helpers
Use dot text dash truncate on a block or inline block with a fixed width. Combine with overflow hidden and white space nowrap. Bootstrap’s helper wraps these CSS rules for you.
Make sure the container has a max width or a fixed width. Without a width, truncation will not trigger because the line never overflows.
Example Code
<div class='text-truncate' style='max-width: 200px;'>This is a very long product name that should cut off</div>
44. When would you use .text-reset and .text-decoration-none on links?
Difficulty: EasyType: SubjectiveTopic: text-helpers
Text reset removes inherited link color so the link matches surrounding text. It is useful inside muted or custom colored blocks where you do not want a bright default blue.
Text decoration none removes the underline. Use it for links that look like buttons or icons. Add focus styles another way to keep accessibility strong.
Example Code
<a href='#' class='text-reset text-decoration-none'>Subtle link</a>
45. Compare .d-none, .invisible, and .visually-hidden. When do you use each?
Difficulty: MediumType: SubjectiveTopic: visually-hidden
Dot d dash none removes the element from layout and from screen readers. Use it when the content should not exist for anyone at that breakpoint.
Dot invisible hides it visually but it still occupies space. Use it for simple show and hide animations or measuring layout. Dot visually dash hidden hides it from sighted users but keeps it for assistive tech. Use it for accessible labels that should not be seen.
Example Code
<span class='visually-hidden'>Skip to main content</span>
46. Which data attribute toggles a collapsible element in Bootstrap 5?
Difficulty: EasyType: MCQTopic: collapse
- data-toggle='collapse'
- data-bs-collapse='true'
- data-bs-toggle='collapse'
- data-target='#id'
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.
Correct Answer: data-bs-toggle='collapse'
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>
47. Which class makes the navbar expand at large screens and collapse below that?
Difficulty: EasyType: MCQTopic: navbar
- .navbar-expand
- .navbar-expand-md
- .navbar-expand-lg
- .navbar-lg
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.
Correct Answer: .navbar-expand-lg
Example Code
<nav class='navbar navbar-expand-lg navbar-light bg-light'>...</nav>
48. Which attribute connects a button to a modal by its id?
Difficulty: EasyType: MCQTopic: modal
- data-target='#myModal'
- aria-controls='myModal'
- data-bs-target='#myModal'
- href='#myModal'
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.
Correct Answer: data-bs-target='#myModal'
Example Code
<button class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#myModal'>Open</button>
49. Which class wraps the dropdown menu items?
Difficulty: MediumType: MCQTopic: dropdowns
- .dropdown-items
- .dropdown-menu
- .menu-list
- .dropdown-content
Use the class .dropdown-menu to contain all dropdown items. The toggle element controls its visibility and positioning using Bootstrap’s dropdown script.
Correct Answer: .dropdown-menu
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>
50. Which attribute closes a modal when the button is clicked?
Difficulty: MediumType: MCQTopic: dismiss
- data-dismiss='modal'
- data-close='modal'
- data-bs-dismiss='modal'
- aria-dismiss='modal'
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.
Correct Answer: data-bs-dismiss='modal'
Example Code
<button class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
51. Which attribute marks an element as a tooltip trigger in Bootstrap 5?
Difficulty: MediumType: MCQTopic: tooltip
- data-tooltip='true'
- data-bs-toggle='tooltip'
- rel='tooltip'
- title-toggle='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.
Correct Answer: data-bs-toggle='tooltip'
Example Code
const btn = document.querySelector('[data-bs-toggle="tooltip"]');
new bootstrap.Tooltip(btn);52. Which attribute starts a carousel cycling automatically?
Difficulty: MediumType: MCQTopic: carousel
- data-bs-auto='true'
- data-ride='carousel'
- data-bs-ride='carousel'
- data-start='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.
Correct Answer: data-bs-ride='carousel'
Example Code
<div id='hero' class='carousel slide' data-bs-ride='carousel'>...</div>
53. Which base class creates an offcanvas panel?
Difficulty: MediumType: MCQTopic: offcanvas
- .offcanvas
- .sidebar
- .drawer
- .panel-off
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.
Correct Answer: .offcanvas
Example Code
<div class='offcanvas offcanvas-start' id='filters'>...</div>
54. 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.
Correct Answer: Popper
55. 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>
56. 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.
57. 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));58. 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>
59. 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>
60. 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>