Bootstrap Interview Preparation

# CHAPTER 19

Bootstrap Interview Preparation #

1. Chapter Introduction #

---

Section A: Fundamentals (Q1–10) #

Q1. What is Bootstrap? What are its key advantages? Bootstrap is an open-source CSS/JS framework for building responsive, mobile-first websites. Key advantages: pre-built responsive grid, 40+ UI components, utility classes, cross-browser compatibility, and no custom CSS needed for most UI requirements.

Q2. What is Bootstrap's grid system? A 12-column flexbox-based layout system. Elements are placed in .container → .row → .col-* hierarchy. Column width classes determine how many of the 12 columns an element spans.

Q3. What are Bootstrap's 6 breakpoints? xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px).

Q4. What is mobile-first design? CSS is written for mobile screens first (default styles apply to all sizes), then expanded for larger screens using min-width media queries. Bootstrap's breakpoint classes (col-md-6) only activate AT and ABOVE the specified size.

Q5. What is the difference between .container and .container-fluid? .container has a max-width that changes at each breakpoint. .container-fluid is always 100% width.

Q6. What changed from Bootstrap 4 to Bootstrap 5? Dropped jQuery dependency, new utility API, RTL support, improved grid (row columns), updated forms API, new accordion/offcanvas components, new color system.

Q7. What are Bootstrap utility classes? Single-purpose classes like .mt-3, .text-center, .fw-bold, .bg-primary that apply one CSS property at a time, enabling styling without writing custom CSS.

Q8. How does Bootstrap handle responsiveness? Through the breakpoint-prefixed class system: col-12 col-md-6 col-lg-4 applies different widths at each breakpoint using min-width media queries under the hood.

Q9. What is the Bootstrap spacing scale? Scale 0–5: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem. Applied with m (margin) or p (padding) prefix.

Q10. What is the Bootstrap utility API? A Sass-based system to generate custom utility classes with custom properties, values, and responsive variants. Used to extend Bootstrap without overriding its defaults.

---

Section B: Components (Q11–20) #

Q11. How does Bootstrap's responsive navbar work? The navbar-expand-{bp} class determines the collapse breakpoint. Below that breakpoint, the navbar content hides and a toggler appears. Bootstrap JS toggles the collapse via the data-bs-toggle="collapse" data attribute — no custom JS needed.

Q12. How do you create a sticky navbar? Add .sticky-top to the <nav> element. Unlike fixed-top, sticky elements scroll with the page until they reach the top, then stick.

Q13. What is the difference between a Modal and an Offcanvas? A Modal is a centered overlay dialog that blocks the page. An Offcanvas slides in from a side (left, right, top, or bottom), typically used for mobile navigation drawers.

Q14. How do you make equal-height cards in a grid row? Add h-100 to each .card class. Bootstrap's row uses flexbox, so h-100 makes each card stretch to the tallest card in the row.

Q15. How does Bootstrap's carousel work? The carousel component uses data-bs-ride="carousel" to auto-start, data-bs-slide-to on indicators to jump to slides, and control buttons with data-bs-slide="prev/next". All behavior is pure data attributes — JavaScript-free for basic use.

Q16. What is form-floating in Bootstrap 5? A form control wrapper that creates Material Design-style floating labels. The label moves up above the input when the input has focus or a value.

Q17. How does Bootstrap form validation work? Add .needs-validation to the form, novalidate attribute to suppress browser popups, then use JavaScript to add .was-validated class on submit. Bootstrap then shows .valid-feedback or .invalid-feedback based on HTML5 constraint validation.

Q18. What is input-group and when do you use it? A component that attaches text, buttons, or dropdowns to the sides of an input field. Used for search boxes with search buttons, currency inputs with $ prefix, or URL inputs with http:// prefix.

Q19. Explain Bootstrap's ratio helper. A wrapper that maintains a fixed aspect ratio for child elements regardless of container width. Crucial for responsive iframes and videos. Classes: ratio-16x9, ratio-4x3, ratio-1x1, ratio-21x9.

Q20. What are Bootstrap's list group features? List groups display lists of content with optional badges, active states, linked items, and contextual colors. Used for activity feeds, file lists, and menu items.

---

Section C: Layout and Advanced (Q21–30) #

Q21. How do you center an element both horizontally and vertically?

<div class="d-flex justify-content-center align-items-center min-vh-100">
  Centered content
</div>

Q22. Explain flex-grow-1. Makes a flex item expand to fill all remaining space in the flex container. Essential for the sidebar/content layout where the main content area should fill all space after the fixed-width sidebar.

Q23. What does ms-auto do in a navbar? Applies margin-left: auto to push all following items to the right of the flex container, creating the common "logo left, nav right" navbar pattern.

Q24. How do you create a 3-column layout on desktop and 1 column on mobile?

<div class="row g-4">
  <div class="col-12 col-lg-4">Column 1</div>
  <div class="col-12 col-lg-4">Column 2</div>
  <div class="col-12 col-lg-4">Column 3</div>
</div>

Q25. What is stretched-link? Makes the entire parent element clickable by extending an anchor's ::after pseudo-element to fill the parent's position context. Requires position: relative on the parent (cards have this by default).

Q26. What is g-0 on a row inside a card? Removes all gutters (padding) from the row and columns, so child images can touch the card edges — essential for horizontal card layouts.

Q27. What does translate-middle do? Combined with top-50 start-50, it shifts an absolutely positioned element by -50% in both X and Y dimensions, perfectly centering it within its positioned parent.

Q28. How do Bootstrap breakpoints work under the hood? Each breakpoint class generates a min-width media query. col-md-6 generates @media (min-width: 768px) { .col-md-6 { flex: 0 0 50%; max-width: 50%; } }.

Q29. What is visually-hidden used for? Hides content visually while keeping it readable by screen readers. Used for icon-only buttons (add hidden text describing the action), notification count labels, and accessibility descriptions.

Q30. How do you show content only on print? Use d-print-block (shown in print, hidden on screen) or d-print-none (hidden in print, shown on screen). Bootstrap includes responsive print utilities.

---

Section D: Quick MCQ Assessment (Q31–40) #

Q31. What class creates inline-block display? a) d-inline b) d-inline-block ✓ c) inline

Q32. Correct tooltip usage needs? a) CSS only b) JS only c) Bootstrap JS + data-bs-toggle="tooltip" + JS init ✓

Q33. shadow-lg creates? a) Small shadow b) Large box shadow ✓ c) Text shadow

Q34. rounded-pill creates? a) Circle b) Fully rounded (pill) border-radius ✓ c) Square

Q35. gap-3 on flexbox creates? a) Margin b) Equal gap between flex children ✓ c) Padding

Q36. .text-truncate requires? a) Nothing b) A defined width (max-width or width) ✓ c) Overflow hidden

Q37. navbar-expand-lg collapses below? a) md b) lg ✓ c) xl

Q38. Equal height grid cards? a) align-stretch b) h-100 on each card ✓ c) card-equal

Q39. data-bs-dismiss="modal" on a button? a) Closes dropdown b) Closes the parent modal ✓ c) Submits form

Q40. Bootstrap's grid uses which CSS layout? a) CSS Grid b) Float c) Flexbox ✓

---

Section E: 15 Practical UI Exercises #

1. 1. Build a responsive 3-column card grid that becomes 1 column on mobile.

1. 2. Create a sticky dark navbar with brand logo, links, and a dropdown menu.

1. 3. Build a registration form with floating labels and Bootstrap validation.

1. 4. Create a product card with badge overlay (SALE), rating stars, and two action buttons.

1. 5. Build a data table with striped rows, hover, and status badges in the last column.

1. 6. Create a login modal with floating labels triggered by a navbar button.

1. 7. Build a hero section with centered text, two CTAs, and a responsive image.

1. 8. Create a pricing section with 3 cards, one highlighted as "Most Popular."

1. 9. Build a responsive admin sidebar that collapses to offcanvas on mobile.

1. 10. Create an image carousel with thumbnail navigation strip.

1. 11. Build an alert notification system showing success/warning/error states with dismiss buttons.

1. 12. Create a profile card with circular avatar, stats row (followers/following/posts), and action buttons.

1. 13. Build a 404 error page centered in the viewport with a home button.

1. 14. Create a newsletter signup section with email input group and submit button.

1. 15. Build a footer with a 4-column link grid on desktop, 2-column on tablet, 1-column on mobile.

Summary #

Next Chapter Recommendation #