Bootstrap Interview Questions

A curated set of Bootstrap interview questions covering the grid system, version differences, and when reaching for a framework actually makes sense.

Grid system#

Q: Explain Bootstrap's grid system in your own words. It's a 12-column, flexbox-based layout system nested three levels deep: a .container centers content and sets responsive max-widths, a .row inside it is a flex container for columns, and .col-* classes inside the row each claim a number of the 12 available column units. Breakpoint infixes like .col-md-6 make a column's width responsive — applying from that breakpoint's width upward, mobile-first.

Q: What's the difference between .container and .container-fluid? .container has responsive max-widths that step up at each breakpoint (so content stays a comfortable reading width on large screens) with centered side margins. .container-fluid is always exactly 100% of the viewport width at every breakpoint, with no max-width cap — used when a layout should always span edge to edge.

Q: How do you center a single column in a 12-column row? Either give it a fixed width and an offset that leaves equal space on both sides (e.g. col-md-6 offset-md-3), or give it a fixed width and add mx-auto, which uses auto horizontal margins to center it without manual offset math.

Version differences#

Q: What changed between Bootstrap 4 and Bootstrap 5? Bootstrap 5 dropped the jQuery dependency entirely — all JavaScript components (modals, dropdowns, tooltips) are now vanilla JS, triggered either declaratively via data-bs-* attributes or through a plain JS API (new bootstrap.Modal(...)). It also dropped Internet Explorer 11 support, renamed several utility classes (ml-*/mr-* became ms-*/me-* for RTL-language support), switched to a rem-based spacing/typography scale, and added new components like offcanvas.

Q: Why did Bootstrap 5 rename left/right utilities to start/end (e.g. ml-3 to ms-3)? To properly support right-to-left (RTL) languages. "Start" and "end" are direction-agnostic — in a left-to-right language "start" means left, but in an RTL language like Arabic it automatically means right, so the same class works correctly in either writing direction without needing separate RTL-specific overrides.

Framework vs. custom CSS#

Q: When would you choose a component framework like Bootstrap over hand-writing custom CSS (or a utility-first framework like Tailwind)? Bootstrap is a strong fit when you need to ship a broad, consistent, accessible UI quickly and don't have (or don't want to invest in) a custom design system — its pre-built components (navbar, modal, card) come with sensible defaults and built-in accessibility behavior out of the box. It's a weaker fit when a project needs a highly distinctive, non-generic visual identity, since overriding Bootstrap's defaults extensively can end up fighting the framework rather than benefiting from it — at that point, a utility-first approach or custom CSS built from scratch often produces a cleaner result.

Q: What's a downside of using a large framework like Bootstrap on a small project? Shipping the full CSS/JS bundle (even if trimmed via the Sass build) is more code than a small page typically needs, and every element tends to inherit Bootstrap's visual "look" unless deliberately restyled — which can make a small project look like every other Bootstrap site unless real customization effort (Sass variable overrides, custom components) goes into it.

Sass customization & accessibility#

Q: What's the difference between overriding $primary and extending $theme-colors with map-merge()? Overriding $primary changes one existing color, and every component already built around $primary (buttons, focus rings, badges) picks it up automatically. Extending $theme-colors via map-merge() instead adds an entirely new named color alongside the existing ones, which generates its own full set of component variants (.btn-brand, .bg-brand, .text-brand) — reassigning $theme-colors directly instead of merging would delete every built-in color's variants, since the map would then contain only the new entry.

Q: Why would a project import individual Bootstrap Sass partials instead of the whole bootstrap bundle? To reduce the compiled CSS size by only including the components actually used — importing buttons and grid but skipping carousel, offcanvas, and tooltips if a project never uses them. The trade-off is that using a skipped component later requires remembering to add its partial back in, and forgetting to do so shows up as completely unstyled markup for that component.

Q: Does using Bootstrap automatically make a page accessible? No — it removes a category of component-level mistakes (Bootstrap's modals, navbars, and collapses come with focus management and ARIA attributes wired in automatically, provided the expected markup structure is used), but it does nothing about accessibility decisions that depend on actual page content: a custom theme color's contrast ratio, real <label>s on form fields, and accessible names on icon-only buttons all remain the developer's responsibility.