Combine grid, navbar, cards, tables, and form patterns into a believable admin shell—the kind of internal tool Bootstrap still dominates. You are not building a full app; you are proving you can compose layout regions and component vocabulary under time pressure.
Requirements
- Top navbar with brand, search or nav links, and user menu dropdown
- Sidebar navigation (collapse to offcanvas on small screens optional bonus)
- Summary metric cards in a responsive row
- Data table with striped rows, badges for status, and action buttons
- Consistent spacing via utilities (
g-3,py-3,mb-4)
Important interview questions and answers
- Q: Why is Bootstrap still common in admin UIs?
A: Mature components (tables, navbars, forms), predictable responsive grid, and low design overhead let teams ship internal tools fast without a dedicated design system. - Q: Bootstrap vs utility-first for dashboards?
A: Bootstrap wins when you want prebuilt components and JS plugins; utility-first wins when every pixel is custom and bundle size is tightly controlled. - Q: How do you avoid “default Bootstrap look”?
A: Customize tokens (--bs-primaryor Sass), tighten spacing scale, swap typography, and replace stock hero patterns with brand-specific layout.
Self-check
- Does the layout work at mobile width without horizontal scroll?
- Are table headers associated with cells semantically?
- Can you rebuild this shell from memory in under fifteen minutes?
Challenge
Admin shell
- Combine navbar, sidebar list-group, and a table card.
- Add one responsive utility (
d-none d-md-blockor similar).
Done when: layout reads as a coherent admin dashboard at desktop and mobile widths.