Interview questions · Tech stack

Bootstrap Interview Questions & Answers (2026)

These interviews test your ability to build responsive, mobile‑first interfaces using Bootstrap's grid, utilities, and components. Demonstrate practical knowledge of version differences, customization, and performance trade‑offs. Show how you translate design specs into clean markup, optimize load time, and troubleshoot common pitfalls to impress interviewers.

Practice one of these free

23 questions · updated Aug 29, 2026

Quick facts

Typical rounds	Phone screen → Coding challenge → System design → Front‑end deep dive
Core topics	Grid system, utility classes, component customization, Sass variables
Version focus	Bootstrap 5 is most common; legacy projects still use 4
Preferred tools	VS Code, Chrome DevTools, npm/yarn, PostCSS
Success metric	Ability to translate a mockup into a functional, responsive page within 30 minutes

Questions

Beginner

What is the main difference between Bootstrap 4 and Bootstrap 5 grid systems?

Bootstrap 5 removed the .card‑deck and introduced a new gutter system using CSS variables, allowing developers to adjust spacing without extra classes. It also added an extra breakpoint (xxl) for ultra‑wide screens and switched to a flex‑based grid by default, improving alignment and reducing markup. Interviewers expect you to mention these changes, why they matter for responsiveness, and how you would migrate a 4‑based layout to 5 by updating class names and adjusting custom CSS.

GoogleMicrosoft

How do you implement a responsive two‑column layout that collapses to a single column on mobile using Bootstrap?

Use the .row container with two .col‑md‑6 columns. On screens smaller than the md breakpoint, each column automatically spans the full width, stacking vertically. Example markup: <div class="row"><div class="col-md-6">…</div><div class="col-md-6">…</div></div>. Explain that the grid’s flex nature handles the collapse, and you can fine‑tune breakpoints with .col‑sm‑* or .col‑lg‑* as needed. Mention that no custom media queries are required, which shows mastery of Bootstrap’s mobile‑first approach.

<div class="row"><div class="col-md-6">Left</div><div class="col-md-6">Right</div></div>

Amazon

Explain how Bootstrap’s utility classes differ from component classes and give an example of when to use each.

Utility classes are single‑purpose helpers like .mt-3 or .text-center that modify spacing, color, or display without adding markup. Component classes, such as .navbar or .card, provide structural and interactive features with predefined HTML structure and JavaScript. Use utilities for quick tweaks—e.g., adding margin to a heading—while components are chosen when you need a full UI element with built‑in behavior, like a collapsible navigation bar. Interviewers look for awareness of the trade‑off between rapid styling and maintainability.

What is the role of the data-bs-toggle attribute in Bootstrap components?

data-bs-toggle tells Bootstrap’s JavaScript which behavior to apply to an element, such as “modal”, “dropdown”, or “collapse”. When the page loads, the Bootstrap bundle scans for these attributes and attaches the appropriate event listeners. Explain that this declarative approach eliminates manual JS wiring, but also requires the bundle to be present, which interviewers often probe to assess your grasp of Bootstrap’s JS integration.

Dropbox

How do you create a sticky footer using Bootstrap’s flex utilities?

Wrap the page in a .d-flex .flex-column container with min‑vh‑100. Place the main content in a .flex-grow-1 element and the footer after it. Example: <body class="d-flex flex-column min-vh-100"><main class="flex-grow-1">…</main><footer>…</footer></body>. The flex‑grow forces the main area to expand, pushing the footer to the bottom when content is short, demonstrating practical use of Bootstrap’s utility classes.

<body class="d-flex flex-column min-vh-100"><main class="flex-grow-1">…</main><footer>…</footer></body>

Uber

What is the difference between .btn-primary and .btn-outline-primary?

.btn-primary applies a solid background color defined by the primary theme variable, while .btn-outline-primary uses a transparent background with a colored border and text. On hover, the outline version fills with the primary color. Explain that outline buttons are useful for secondary actions, providing visual hierarchy without adding extra CSS, a nuance interviewers often test.

eBay

What is the purpose of the .container‑xxl class introduced in Bootstrap 5.3?

.container‑xxl provides an extra breakpoint for ultra‑wide screens (≥1400 px), allowing designers to constrain content on very large displays while preserving readability. It works like other container classes, adding responsive max‑widths. Interviewers expect you to note that this helps avoid overly stretched layouts on 4K monitors and aligns with the new xxl breakpoint, showing awareness of recent releases.

Netflix

Intermediate

What is the purpose of the $spacer Sass variable in Bootstrap, and how would you customize it?

The $spacer variable defines the base spacing unit (1rem by default) used by margin and padding utilities. Changing it globally scales all spacing utilities, enabling consistent design adjustments. To customize, import Bootstrap’s source SCSS, set $spacer: 1.5rem; before the @import "bootstrap" line, then compile. Explain that this approach keeps spacing consistent across the project and avoids manual class overrides, demonstrating a deeper grasp of Bootstrap’s theming system.

$spacer: 1.5rem;
@import "bootstrap";

Netflix

How would you disable Bootstrap’s JavaScript for a component that you want to implement with vanilla JS?

Exclude the component’s data‑api attributes (e.g., data-bs-toggle) and avoid importing bootstrap.bundle.js for that feature. Instead, include only the CSS and write your own event listeners. For example, replace a .modal’s data attributes with a custom click handler that toggles the .show class. Interviewers expect you to discuss the benefit of reducing bundle size and avoiding conflicts, while still leveraging Bootstrap’s styling.

Apple

Describe how the new CSS custom properties in Bootstrap 5 improve theming compared to previous versions.

Bootstrap 5 exposes many design tokens as CSS variables (e.g., --bs-primary, --bs-gutter-x). This allows runtime theme changes without recompiling SCSS, enabling dark mode toggles or brand updates via simple style overrides. In contrast, Bootstrap 4 required rebuilding the SCSS for each change. Explain that using :root { --bs-primary: #0062cc; } can instantly affect all components, showing you understand modern theming flexibility and performance benefits.

:root { --bs-primary: #0062cc; }

Adobe

What are the trade‑offs of using the container‑fluid class versus a fixed‑width container?

container‑fluid spans the full viewport width, providing maximum space on large screens but potentially causing overly stretched layouts and readability issues. Fixed‑width containers (e.g., .container-lg) constrain content to a readable max width, improving visual hierarchy but leaving unused space on very wide displays. Discuss when to choose each based on design requirements, performance (fluid may require more responsive images), and accessibility considerations.

Twitter

How would you troubleshoot a Bootstrap carousel that does not advance automatically?

First verify that the data-bs-ride="carousel" attribute is present and that the required JavaScript bundle is loaded. Check for JavaScript errors in the console that might halt execution. Ensure that the carousel items have the .active class on the first slide and that the interval option is not set to false. If custom CSS overrides the .carousel‑item display property, restore it. Explain each step to show systematic debugging skills.

PayPal

Can you explain how the .row‑cols‑* utilities work and when they are useful?

.row-cols-* sets the number of columns per row regardless of content width, using CSS grid under the hood. For example, .row-cols-3 creates three equal columns, automatically wrapping excess items. This is handy for uniform card layouts where you want consistent column counts without calculating widths. Mention that it simplifies responsive design by pairing with breakpoint variants like .row-cols-md-4, showing you understand modern grid utilities.

Square

Explain how the .g‑* gutter utilities replace the older .row‑no‑gutter approach.

.g-* sets horizontal and vertical gutters using CSS variables (--bs-gutter-x, --bs-gutter-y). Unlike the deprecated .row-no-gutter, which required custom CSS to remove spacing, .g-0 cleanly eliminates gutters across all breakpoints. This modern approach provides granular control (e.g., .g-2, .g-lg-3) and aligns with Bootstrap 5’s utility‑first philosophy, a point interviewers often check for up‑to‑date knowledge.

How can you use Bootstrap’s spacing utilities to create equal height columns without custom CSS?

Apply the d-flex and align-items-stretch classes to the .row, and use .h-100 on each .col to force them to fill the row’s height. Example: <div class="row d-flex align-items-stretch"><div class="col h-100">…</div><div class="col h-100">…</div></div>. This leverages Flexbox’s stretch behavior, avoiding extra CSS and demonstrating efficient use of Bootstrap utilities.

Zoom

How would you override Bootstrap’s default font family across an entire project?

Set the $font-family-base Sass variable before importing Bootstrap: $font-family-base: "Roboto", sans-serif; @import "bootstrap";. Alternatively, use CSS custom properties: :root { --bs-font-sans-serif: "Roboto", sans-serif; }. Explain that the Sass method recompiles the CSS, while the CSS variable approach allows runtime changes, demonstrating flexibility in theming.

$font-family-base: "Roboto", sans-serif;
@import "bootstrap";

Airbnb

Advanced

How can you customize Bootstrap breakpoints without modifying the core library?

Create a custom SCSS file that overrides the $grid-breakpoints map before importing Bootstrap. For example, $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1440px); @import "bootstrap"; This approach preserves the original library while tailoring breakpoints to project needs. Interviewers expect you to mention the need to recompile the CSS, the impact on utility classes, and how this keeps the source maintainable.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1440px
);
@import "bootstrap";

Explain how you would implement a dark‑mode toggle using Bootstrap’s CSS variables.

Define a .dark-mode class that overrides key variables: .dark-mode { --bs-body-bg: #212529; --bs-body-color: #f8f9fa; --bs-primary: #0d6efd; } Then toggle this class on the <html> or <body> element via JavaScript. All components automatically adopt the new colors because they reference the variables. Mention that this avoids duplicating component styles and leverages Bootstrap’s built‑in theming system, which is exactly what interviewers look for in a scalable solution.

.dark-mode { --bs-body-bg: #212529; --bs-body-color: #f8f9fa; }

Spotify

What is the purpose of the .visually-hidden class and when should you use it?

.visually‑hidden hides content from sighted users while keeping it accessible to screen readers. It’s used for assistive text such as “Skip to main content” links or descriptive labels for icons. Explain that it sets position: absolute, width/height: 1px, overflow: hidden, and clip‑path to ensure the element is not rendered but remains in the accessibility tree, demonstrating your awareness of inclusive design.

IBM

How does Bootstrap handle responsive images, and what markup would you use for a picture element with multiple sources?

Bootstrap provides the .img-fluid class which applies max-width: 100% and height: auto, ensuring images scale within their container. For more control, combine .img-fluid with the HTML <picture> element: <picture><source srcset="hero‑large.jpg" media="(min-width: 992px)"><source srcset="hero‑medium.jpg" media="(min-width: 768px)"><img src="hero‑small.jpg" class="img-fluid" alt="Hero"></picture>. This lets you serve different resolutions while preserving Bootstrap’s responsive behavior, a detail interviewers often probe.

<picture><source srcset="hero-large.jpg" media="(min-width: 992px)"><source srcset="hero-medium.jpg" media="(min-width: 768px)"><img src="hero-small.jpg" class="img-fluid" alt="Hero"></picture>

Snapchat

What are the performance implications of using the full Bootstrap CSS bundle versus a custom build?

The full bundle includes all components, utilities, and grid styles, increasing payload size (~150 KB gzipped). A custom build via Sass can exclude unused components, reducing CSS size and improving first‑paint time. Discuss the trade‑off: a full bundle speeds development and ensures fallback styles, while a custom build requires maintenance but yields faster load times, especially on mobile networks. Interviewers look for awareness of bundle analysis tools and cost‑benefit reasoning.

Shopify

How would you integrate Bootstrap with a CSS‑in‑JS solution like styled‑components?

Import Bootstrap’s compiled CSS globally, then create styled components that extend Bootstrap classes using the styled() factory, e.g., const Card = styled.div.attrs({ className: "card" })`margin: 1rem;`. This preserves Bootstrap’s base styling while allowing scoped customizations. Discuss the importance of order—global CSS must load before component styles—to avoid specificity conflicts, showing you can blend utility frameworks with modern React styling approaches.

GitHub

What steps would you take to ensure Bootstrap components are accessible for keyboard users?

Verify that interactive components have proper tabindex values and ARIA attributes (e.g., aria-expanded for dropdowns). Ensure focus styles are visible, using .focus-visible or custom CSS if needed. Test navigation using Tab and Shift+Tab to confirm logical order. For modals, trap focus within the dialog and return focus to the trigger on close. Explain that Bootstrap already provides many of these features, but you must audit custom overrides to maintain WCAG compliance.

Salesforce

Common mistakes

Using both .container and .container‑fluid together, causing unexpected width behavior.
Relying on custom media queries instead of Bootstrap’s built‑in breakpoints, leading to duplicate code.
Overriding Bootstrap utilities with !important, which defeats the utility‑first design and creates specificity wars.
Neglecting to include the required JavaScript bundle for components that depend on it, resulting in non‑functional UI elements.

Study plan

Review Bootstrap 5 grid fundamentals and practice building responsive layouts.
Master utility classes for spacing, typography, and display; create a cheat sheet.
Deep dive into component customization via Sass variables and CSS custom properties.
Implement a small project (e.g., a landing page) using only Bootstrap utilities.
Profile performance: compare full bundle vs. custom build, and practice accessibility checks.

FAQ

Do I need to learn jQuery to use Bootstrap?

Bootstrap 5 removed the jQuery dependency; all components work with vanilla JavaScript. Knowing basic DOM manipulation helps, but jQuery is no longer required.

Can I use Bootstrap with React or Vue?

Yes. Import the compiled CSS and use Bootstrap classes in JSX or template markup. For interactive components, either rely on Bootstrap’s JS bundle or replace it with framework‑specific equivalents.

How often should I update my Bootstrap version?

Track major releases; upgrade when you need new features, security patches, or improved accessibility. Minor updates can be applied more frequently to stay current.

Is it okay to mix Bootstrap with other CSS frameworks?

Mixing frameworks can cause class conflicts and increased bundle size. If you must, isolate each framework’s CSS using scoped containers or namespace prefixes to avoid collisions.

What is the best way to debug a layout that doesn’t align as expected?

Use Chrome DevTools to inspect the element’s computed styles, check for overridden grid or flex properties, and verify that the correct breakpoint classes are applied. Adjust utilities live to see immediate effects.