Make the most out of Bootstrap 5.3 with NinjaBootstrap

Hello from Jeff @ LiveCanvas.

In this article I’ll try to outline what is NinjaBootstrap and if it makes sense for you. Let’s dive into the story of it.

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

Our product is aimed at professional webmasters; between our clients we have many high-profile web agencies, and generally people who can code at least a bit.

Seeing what people do with our products, and spending lots of time with Bootstrap, sometimes we naturally 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 launched this approach, but the latest versions of Bootstrap are catching up, offering SASS – based tools to customize or even roll your own utility classes.

What we saw is that few people actually profit of that – as most people tend to use Bootstrap out of the box, so, for the next generation of our own product, we decided to make some small addons / configurations  for Bootstrap, 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 – 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!