Make the most out of Bootstrap 5.3 with NinjaBootstrap

Hello from Jeff @ LiveCanvas.

At the LiveCanvas headquarters, we build and maintain a Bootstrap-based WordPress page builder plugin, which follows a visual and code – based approach, and a companion Bootstrap-based starter theme: picostrap.

Our products are aimed at professional users, who can code and understand at the very least HTML.

Between our clients we have many high-profile web agencies, or generally technically skilled people.

Seeing what people do with our products, thus naturally spending lots of time with Bootstrap, sometimes we focus on what’s actually missing from it – or what is misused / underused of it.

Personally, I’m a big fan of utility classes – a very useful paradigm which is deeply in fashion.

Tailwind is mostly considered as the king of this approach, but the latest versions of Bootstrap are catching up somehow, offering a SASS – based way (Utility API)  to customize or even roll your own utility classes.

What we saw is that very few people do actually use those features – as most people tend to use Bootstrap out of the box.

That said, for the next generation of our own product (picostrap), we decided to make a set of small  SCSS files  to configure  Bootstrap, and enable a more comprehensive kit for the average designer,  and found a fancy name for it: NinjaBootstrap.

We built NinjaBootstrap with the spirit of offering developers a richer suitcase of reliable tools, supercharging Bootstrap with some ideas inspired by Tailwind – and our own experience. Not a lot of added weight – it’s just what you really need to make your pages shine a bit.

One of the key additions is in the responsive department. For example, NinjaBootstrap enables responsive variations for the positioning classes, which really help to achieve stylish and original layouts on desktop, without breaking things on mobile.

On a more original side, there are some pretty special color shade utility classes. Every theme color (eg  “primary”) now has ten additional shades immediately available, which invert themselves when dark mode is enabled. This is incredibly useful to reduce your work to support dark mode.

NinjaBoostrap is already built- in our new picostrap starter theme, version 3 – in the sass/ninjabootstrap folder –  that’s how we use it in our product, but we wanted to make it available also outside WordPress as well.

We’ve packed it as a NPM package, which is basically a drop-in Bootstrap replacement.

Of course you can also use in a simple HTML page, without build tools. Just hotlinking the CSS from the CDN link, and get started immediately.

Check out the documentation and see if this approach suits your needs. I’d be glad to know it is so!