Mobile Ready Demo

Digital Art Supplies is responsive via Bootstrap 5's grid and navbar components, verified using Chrome/Opera DevTools' device toolbar (Ctrl+Shift+M).

Desktop (≥992px)

Full navbar, hero banner, and a 4-column product grid on Home/Shop.

Mobile (<992px)

The navbar uses Bootstrap's navbar-expand-lg class, which collapses the nav links into a hamburger toggle below the lg breakpoint.

Tapping the hamburger expands a vertical nav menu (Bootstrap's Collapse component):

The product grid uses Bootstrap's responsive row-cols-* classes (row-cols-1 row-cols-md-2 row-cols-lg-4), so it reflows from 4 columns down to a single column as the viewport narrows — visible in the screenshot above.

How it works

• src/components/NavBar.jsx — navbar navbar-expand-lg + a navbar-toggler button wired to Bootstrap's Collapse behavior; also auto-closes the expanded menu when a nav link is tapped.
• src/components/ProductList.jsx — renders the grid with responsive row-cols-* classes so card count per row scales with viewport width.
• No custom media queries were needed for the core layout — Bootstrap's grid breakpoints handle it; src/styles/index.css only adds cosmetic tweaks on top.