Mostudio is a dark portfolio website template for photographers and photography studios, built on Bootstrap 5. A fixed sidebar on the left holds the logo, the menu and a newsletter sign-up, and on phones and tablets it slides in from a menu button. The layout is responsive and mobile-ready. There are six pages: home, gallery, about, pricing, contact and a single portfolio page.
The home page shows nine portfolio rows that alternate a photo and its caption, and every photo opens in a lightbox. The gallery page has twelve photos with captions that appear on hover, the about page introduces the studio, its founder and its team, and the pricing page shows four packages over photos. You will also find a contact page with contact details, studio hours, a working contact form and a map that loads on click, and a single portfolio page with the story behind a photo, tags, an author box, comments and a comment form. Mostudio gives you a ready-made site to show your photography and take bookings.
What’s new in 3.0
Bootstrap 5.3.8 (the earlier release used Bootstrap 4.5.0 and jQuery), compiled from Sass with the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. PhotoSwipe 5 replaces Magnific Popup for the portfolio lightbox, and a small built-in module replaces Waypoints and animate.css for the scroll reveals. Owl Carousel, Stellar, Scrollax and the counter and easing plugins, which nothing on the pages used, are gone. Lucide SVG icons replace Font Awesome 4.7 and an unused icon font. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
Lighter pages: the home page went from 2.3 MB and 41 requests to 712 KB and 21 requests. Every photo has an AVIF version with the JPEG as the fallback, the first photo of each page is preloaded, the comment avatars load lazily, the largest photo is re-encoded from 700 KB to 476 KB, and the full-screen preloader is gone. The download went from 3.4 MB to 3.6 MB, mostly because it now carries an AVIF copy of every photo.
No third-party requests: Poppins and Abril Fatface are self-hosted, the icons are local SVGs, the contact page shows an OpenStreetMap map that loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded Font Awesome from a CDN, its fonts from Google Fonts and the Google Maps script, which threw errors on the five pages without a map.
Working forms: the newsletter sign-up in the sidebar, the contact form and the comment form on the single page send through PHP handlers in includes/, each with a spam trap and an in-page message. Before, none of them could send anything: the newsletter had no submit button and its send icon was invisible, the contact form had no action, and the comment form’s fields had no names.
Accessibility: a skip link, a main landmark and one h1 per page with headings in order, a labelled menu button that closes the sidebar with Esc, names on the photo links, gallery captions that also show on keyboard focus, labelled form fields, visible focus rings, reduced-motion support and WCAG AA text contrast, with all text at 5.2:1 or better: lighter greys for body, meta and label text on the dark ground, a dark band behind the gallery captions and a darker overlay on the pricing photos.
Fixed: every portfolio photo on the home page opens in the lightbox (the ninth opened the bare image file instead). The single portfolio page reads well on phones: the story no longer runs into the right edge of the screen, and the author box puts the photo above the bio instead of squeezing the bio to a word or two per line. The gallery tiles, pricing columns and team cards keep their column layout, the “Load more”, “Explore” and “Reply” links that pointed nowhere lead to the gallery, the contact page and the comment form, and every page has its own title and description.
New demo content: a caption and category for every portfolio photo, a studio text and team on the about page, four different packages from $180 to $600 in place of four identical ones, the story behind the featured portrait with a comment thread in place of placeholder text, fictional names and contact details, and credited Unsplash photos for three gallery tiles: a still life, a rim-lit profile and a studio portrait.