Mobile-ready demo

TrainerMart uses Bootstrap 5 for a mobile-first layout. On a wide screen the navigation stays in one row and products sit in a multi-column grid. On a narrow screen the same components stack vertically, and the nav links move into a collapsible menu.

Screenshots below were taken by resizing the browser (and using the device toolbar) on the deployed site:

https://storage.googleapis.com/trainermart-jose-p1/index.html#/

Large screen

Desktop width. The navbar shows Home, Shop, Cart, Account, and Sign up in a horizontal row. The home hero and featured products use several columns.

Small screen (phone width)

Narrow width, about 375–430px. The brand stays on the left and the links collapse behind the hamburger button. Page sections stack in one column so text, images, and buttons stay readable without horizontal scrolling.

Opening the hamburger shows the same links in a vertical list. Cart count stays on the Cart link.

Product detail on a phone: image on top, then name, price, size, color, quantity, and Add to Cart.

How Bootstrap handles the layout

Responsive navigation. Navbar uses navbar-expand-lg. At the large breakpoint and up, .navbar-nav is a horizontal row. Below that, Bootstrap hides the links in .collapse and shows .navbar-toggler. The button targets #mainNav with data-bs-toggle="collapse". bootstrap/dist/js/bootstrap.bundle.min.js is imported in src/main.jsx so that toggle works. No custom JavaScript was written for the menu.

Responsive grid. Pages sit in .container, which adds side padding and a max width that changes by breakpoint.

• Home highlights: col-md-4 — one column on a phone, three columns from the medium breakpoint up.
• Featured products and Shop: col-12 col-sm-6 col-lg-4 inside .row.g-4. One card per row on the smallest screens, two from sm, three from lg.
• Product detail: col-md-6 for the image and col-md-6 for the form. They stack until the medium breakpoint, then sit side by side.
• Account forms: col-lg-6 inside a centered row, so the form is full width on a phone and a narrower column on a large screen.
• Footer: col-md-4 for the three footer blocks, stacked on small screens.

Utility classes. d-flex, justify-content-between, align-items-center, gap-2, flex-wrap, py-5, and mb-* space controls and thumbnails without fixed pixel widths. img-fluid lets detail photos shrink with the column. Card images use a fixed height and object-fit: cover so mixed product photos stay even inside the grid.

Custom CSS

src/index.css does not add a separate mobile stylesheet. It sets colors, the hero background, card hover, and form focus. Those rules apply at every width. Responsiveness comes from Bootstrap’s grid, the collapsing navbar, and fluid images.

Hover lift on .card still runs on touch devices, but it does not change the layout. Nothing in React checks window.innerWidth. The same components render at every size; Bootstrap’s classes change how they are arranged.