The grid below is built from Bootstrap's row-cols-1 row-cols-md-2 row-cols-lg-3 utility — one column on phones, two at tablet width, three at desktop — with a zero gutter (g-0) so photos and borders touch edge to edge like a printed contact sheet. Every column in a row stretches to match its tallest neighbor, which is why all six card photos below share the same 3:2 crop: mismatched aspect ratios would leave uneven whitespace under the shorter cards. The date, heart, and comment counts under each headline are sample numbers, not live data — wire them to whatever your backend actually tracks.
This card's photo stands in for the banner grid up top: one full-width tinted tile and two half-width tinted tiles, each holding a headline, a line of copy, and a single call to action.
Full Story
Open Components in the nav above and look for the nested submenu — Bootstrap 5's dropdown only ships one level out of the box, so the second level here runs on about 40 lines of vanilla JavaScript.
Full Story
row-cols-1 row-cols-md-2 row-cols-lg-3, zero gutters, one image aspect ratio held constant across every tile — that's the entire recipe for the grid you're scrolling through right now.
The numbered links below are dressed up to look real — an active page, an ellipsis for the skipped range, disabled edges — but nothing here actually paginates yet. Wire the hrefs to a real page list and it works.
Full Story
Every page in this template ends the same way: a bio panel with per-brand social icons on one side, a ready-to-wire contact form on the other. Point the form's action at your handler and it's live.
Full Story
Seven palettes, each a handful of :root custom properties apart. Pick one from the dots in the nav — the choice sticks across all three pages via localStorage.