Now UI Kit – Free Bootstrap 4 Kit
Last Updated on July 9, 2026 by Editorial Team
Now UI Kit is the result of the collaboration of Invision and Creative Tim. The kit is built on top of Boostrap 4 and contains 50 elements + 3 ready-made templates.
What stands out immediately in the preview is the moody, cinematic mountain photography used across every section, a red-toned hero shot up top and cooler blue-grey ranges bleeding into the background sections behind it.
That choice of imagery signals the design philosophy behind Now UI Kit: bold, full-bleed photography paired with flat, high-contrast UI elements that sit confidently on top of it.
The orange accent color runs through the buttons, badges, and interactive states, giving the whole kit a warm, energetic personality against otherwise dark, moody backdrops.
This is a Bootstrap 4 UI kit, so the elements you see, the pill-shaped and rounded buttons, the color-coded links, the size variations, are all built to slot into a standard Bootstrap grid without a lot of rework.
The “Basic Elements” panel in the preview shows exactly how systematic the kit is: buttons broken down by style, size, and color, links following the same color logic, all documented in one scrollable style guide page rather than scattered across separate files.
That kind of component library page is genuinely useful on its own, even before you touch the templates, because it gives you a single reference for every button and link state your project will need.
Where This Kit Performs Best
Now UI Kit reads well for portfolio sites, personal profile pages, photography or travel-focused landing pages, and marketing sites for creative studios.
The dark hero treatment with a full-width background photo and centered logo, headline, and subhead is a pattern that works especially well for agencies, product launches, or anyone building a one-page site meant to open with visual impact.
The profile card glimpsed in the background, complete with avatar, follow button, stats, and a portfolio grid, suggests the kit also handles social or community-style layouts, think member profiles, contributor pages, or a “my work” section on a personal site.
- Landing pages for creative agencies or freelancers who want a strong photographic hero
- Personal portfolio or “about me” pages with bio, social links, and image grids
- Marketing or product pages that need a consistent button and badge system out of the box
- Quick prototypes where you need Bootstrap-based components styled beyond the default theme
Because everything follows Bootstrap 4 conventions, it also suits developers who want a designed starting point rather than building a visual language from scratch on top of the default Bootstrap classes.
Customizing the Kit for Your Own Brand
Swapping the color palette is the fastest way to make this kit feel like your own rather than an obvious template.
The orange used for primary buttons and highlights is a single accent running through many components, so updating that one value cascades nicely across buttons, links, and badges if you’re editing the underlying styles.
The background photography is doing a lot of the emotional work here, so replacing the mountain imagery with your own high-resolution photography, while keeping the same dark overlay treatment, is an easy way to retarget the kit toward a different industry, food, fashion, architecture, without touching the layout.
When you do swap images, keep the same dark gradient or overlay approach used in the hero: it’s what keeps white text and orange buttons legible against a busy photograph.
For the component library page, resist the urge to use every button style and color on one screen. The kit gives you options, but a real site should pick two or three states, like a primary orange, a neutral, and maybe one semantic color for success or danger, and use them consistently.
Pairing this kit with a clean sans-serif typeface, the kind already implied by the crisp headline in the hero, keeps the tone modern and avoids fighting with the photography for attention. If you bring in icons, stick to simple line or solid icon sets so they don’t clash with the flat, geometric button shapes already established in the kit.
