Here are the Top 30 Advanced Bootstrap Interview Questions and Answers that cover topics from Bootstrap 4 and 5, suitable for experienced frontend developers or UI designers.

---

🔹 Top 30 Advanced Bootstrap Interview Questions & Answers

1. What is the difference between Bootstrap 4 and Bootstrap 5?

Answer:

• Bootstrap 5 dropped jQuery dependency.
• Improved grid system with utilities like g* classes.
• Added RTL support, custom forms, and offcanvas component.
• Removed card decks, jumbotron, and input groups using .form-row.

---

2. Explain the Bootstrap Grid System.

Answer:
Bootstrap uses a 12-column grid system based on Flexbox. You can create responsive layouts using breakpoints like col-sm-, col-md-, col-lg-, etc.

---

3. How can you customize Bootstrap using SCSS?

Answer:
Import the Bootstrap SCSS files and override variables in a custom SCSS file before importing Bootstrap’s styles:

$primary: #ff5722;
@import 'bootstrap';

---

4. What are Breakpoints in Bootstrap?

Answer:
Breakpoints define the width at which layout changes:

• xs – <576px
• sm – ≥576px
• md – ≥768px
• lg – ≥992px
• xl – ≥1200px
• xxl – ≥1400px

---

5. What is a responsive container in Bootstrap?

Answer:
Use .container, .container-fluid, and .container-{breakpoint} for different responsiveness levels.

---

Top 30 Advanced Bootstrap Interview Questions and Answers

6. What is the use of .order-* classes in Bootstrap?

Answer:
Used to reorder flex items:

<div class="order-2 order-md-1">First on md</div>

---

7. What are utility classes in Bootstrap 5?

Answer:
They are helper classes for spacing, colors, sizing, etc., like .p-3, .text-center, .bg-success.

---

8. Explain Offcanvas component in Bootstrap 5.

Answer:
Offcanvas is a hidden sidebar-like element that slides into view:

<button data-bs-toggle="offcanvas" data-bs-target="#myOffcanvas">Toggle</button>

---

9. What is the use of .visually-hidden class?

Answer:
Replaces sr-only from Bootstrap 4. It hides elements visually but keeps them accessible to screen readers.

---

10. How do you align content vertically in Bootstrap 5?

Answer:
Use Flexbox utilities like:

<div class="d-flex align-items-center">...</div>

---

Top 30 Advanced Bootstrap Interview Questions and Answers

11. Explain how you use Bootstrap with React or Vue.

Answer:
You can use Bootstrap CSS directly or libraries like React-Bootstrap or BootstrapVue for component-based usage.

---

12. How to disable Bootstrap’s responsive behavior?

Answer:
Avoid using responsive classes and use .container instead of .container-fluid.

---

13. What’s the purpose of .g-* classes in Bootstrap 5?

Answer:
.g-* is the gutter spacing utility used in grid layouts.

---

14. How can you optimize Bootstrap loading in production?

Answer:

• Use CDN for CSS/JS.
• Compile only used components with SCSS.
• Tree-shaking with tools like PurgeCSS.

---

15. What is the Z-index scale in Bootstrap?

Answer:
Bootstrap uses predefined z-index levels in its $zindex-* SCSS variables like:

• Modal: 1050
• Popover: 1070
• Toast: 1080

---

Top 30 Advanced Bootstrap Interview Questions and Answers

16. How do you override Bootstrap styles safely?

Answer:

• Use more specific selectors or !important.
• Use custom SCSS before importing Bootstrap.
• Use CSS variables in Bootstrap 5.

---

17. What is the difference between .d-none and .invisible?

Answer:

• .d-none hides the element completely (no space).
• .invisible hides the element but retains space in layout.

---

18. What are media objects in Bootstrap?

Answer:
Used to build complex layouts with images and content like cards or comment threads:

<div class="media">
  <img src="..." class="mr-3" />
  <div class="media-body">...</div>
</div>

---

19. Explain how Modals work in Bootstrap.

Answer:
Triggered using data-bs-toggle="modal" and data-bs-target="#myModal" or via JS:

let modal = new bootstrap.Modal(document.getElementById('myModal'))
modal.show()

---

20. What is Bootstrap’s Reboot?

Answer:
It’s a set of opinionated CSS resets built on Normalize.css to improve rendering consistency across browsers.

---

Top 30 Advanced Bootstrap Interview Questions and Answers

21. How to make responsive images?

Answer:
Use .img-fluid class:

<img src="..." class="img-fluid" alt="Responsive image">

---

22. How to center a div horizontally and vertically using Bootstrap 5?

Answer:

<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div>Centered Content</div>
</div>

---

23. What are placeholders in Bootstrap?

Answer:
Bootstrap 5 includes placeholder loading states using .placeholder and .placeholder-glow.

---

24. What’s the difference between .btn and .btn-* classes?

Answer:
.btn is the base class. .btn-primary, .btn-danger, etc., apply colors.

---

25. Explain Accordion component in Bootstrap.

Answer:
Used to create collapsible sections using .accordion, .accordion-item, .accordion-body, etc.

---

Top 30 Advanced Bootstrap Interview Questions and Answers

26. How to use tooltips in Bootstrap?

Answer:
Initialize with JS:

var tooltipTrigger = new bootstrap.Tooltip(document.querySelector('#example'))

---

27. What are Toasts in Bootstrap?

Answer:
Used for lightweight notifications. Example:

<div class="toast" data-bs-delay="3000" data-bs-autohide="true">
  <div class="toast-body">Hello</div>
</div>

---

28. How do you create a navbar with dropdown in Bootstrap?

Answer:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Menu</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item">Action</a></li>
  </ul>
</li>

---

29. What is the purpose of .stretched-link?

Answer:
It makes the entire parent block clickable when placed inside it.

---

30. How to manage dark mode in Bootstrap 5?

Answer:
Bootstrap 5 supports dark classes like .bg-dark, .text-white, and you can toggle themes via JavaScript + CSS variables.

---

Top 30 Advanced Bootstrap Interview Questions and Answers