
Go beyond Bootstrap
NinjaBootstrap is a meticulously crafted collection of SCSS utilities that configure and extend Bootstrap 5, to add the missing utility classes you really need in order to build great designs - without adding additional CSS.
Conveniently packed as a drop-in Bootstrap replacement.
BOOTSTRAP 5.3.2
SASS
SHURIKEN (Hilarious!)
Getting Started
Installing NinjaBootstrap via NPM
NinjaBootstrap can be installed in any project, via NPM or simple CDN , as a drop-in Bootstrap replacement,
Using WordPress?
NinjaBootstrap is built-in inside the picostrap WordPress Theme, so if you're using picostrap from version 3.0.0 onwards, you're served.
Simple CDN usage
NinjaBootstrap can be easily used also without build tools, for example in a simple HTML page,
as a drop-in Bootstrap replacement.
A simple HTML starter example template can be seen on this page.
I just want to hotlink a CSS file
Feeling lazy? No problem. Add this line to any web page to immediately get started. Add the JS or customize later.
<link href="https://cdn.jsdelivr.net/gh/livecanvas-team/ninjabootstrap/dist/css/bootstrap.min.css" rel="stylesheet" >
Positioning
Bootstrap 5 brought quick positioning classes.
NinjaBootstrap enables the responsive variations for these classes so you have more control.
Position
Allows to set the position CSS property.
Syntax
position-{breakpoint}-{value}
Accepted {breakpoint} values: sm | md | lg | xl | xxl
Accepted {value} values: static | relative | absolute | fixed | sticky
Sample classes: position-sm-sticky | position-md-absolute | position-lg-fixed | position-xl-static | [...]
Usage example
The code below will make the element have relative positioning on mobile, and absolute positioning from MD upwards.HTML CODE<span class="position-relative position-md-absolute">HELLO WORLD</span>
Top, Start, Bottom & End
Use these shorthand utilities for quickly configuring the position of an element.
Syntax
{position}-{breakpoint}-{value}
Accepted {position} values: top | start | bottom | end
Accepted {breakpoint} values: sm | md | lg | xl | xxl
Accepted {value} values: 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100
Sample Classes: top-sm-20 | start-md-0 | bottom-lg-90 | end-xl-50
Basic absolute positioning demo
This example shows how basic positioning classes work. Elements below have the position-absolute class, plus the shown ones.top-0 start-0top-0 end-0top-50 start-50bottom-50 end-50bottom-0 start-0bottom-0 end-0
Responsive usage example
NinjaBootstrap extends the classes above with more values and adds responsive variations.The code below will make the element have relative positioning on mobile, and absolute positioning from MD upwards. In the MD breakpoint, the top value will be 50%. In the XL breakpoint, the top will be 25%. Here is a quick demo page of this in a new window.
HTML CODE<span class="position-relative position-md-absolute top-md-50 top-xl-25">HELLO WORLD</span>
Translate Middle
This class applies the transformations translateX(-50%) and translateY(-50%) to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.
Syntax
translate-middle-{breakpoint}
translate-middle-{breakpoint}-x
translate-middle-{breakpoint}-y
Accepted {breakpoint} values: sm | md | lg | xl | xxl
Sample Classes: translate-middle-lg | translate-middle-lg-x | translate-middle-lg-y
Usage example
Check the quick demo page
HTML CODE<div class="position-absolute top-0 start-0 translate-middle-xl bg-dark p-1">
<p>HELLO WORLD</p>
</div>
Sizing
Bootstrap 5 brought quick sizing classes, for width and height, with four preset values (25, 50, 75 ,100).
NinjaBootstrap enables a more granular control so you can cover more cases easily.
Width
Allows to set the width CSS property.
Syntax
w-{value}
Accepted {value} values: 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100
Sample classes: w-5 | w-30 | w-50 | w-90 | w-100
Visual Demo
The code below will demostrate the classes.w-5w-10w-15w-20w-25w-30w-35w-40w-45w-50w-55w-60w-65w-70w-75w-80w-85w-90w-95w-100
Height
Allows to set the height CSS property.
Syntax
h-{value}
Accepted {value} values: 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100
Sample classes: h-5 | h-30 | h-50 | h-90 | h-100
Visual Demo
The code below will demostrate the classes.h-5h-10h-15h-20h-25h-30h-35h-40h-45h-50h-55h-60h-65h-70h-75h-80h-85h-90h-95h-100
Min-Viewport Height
Allows to set the min-height CSS property in viewport height units.
Syntax
min-vh-{value}
Accepted {value} values: 25 | 50 | 75 | 100
Sample classes: min-vh-25 | min-vh-50 | min-vh-75
Borders
Bootstrap 5 brought border utility classes.
NinjaBootstrap enables the responsive variations for these classes so you have more control.
Additive Border
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Syntax
border-{breakpoint}
border-{direction}-{breakpoint}
Accepted {direction} values: top | bottom | start | end
Accepted {breakpoint} values: sm | md | lg | xl | xxl
Sample classes: border-sm | border-top-md | border-end-lg | [...]
Usage example
The code below will make the element have a border at the end.HTML CODE<div class="border-end-lg"> Border end only from lg </div>
Letter Spacing
Bootstrap does not have utility classes for letter spacing by default.
NinjaBootstrap adds simple classes to control letter spacing via the Bootstrap Utility API.
Letter Spacing
Allows to set the letter-spacing CSS property.
Syntax
ls-{value}
Accepted {value} values: n2 | n1 | 0 | 1 | 2 | 3
Sample classes: ls-n2 | ls-n1 | ls-0 | ls-1 | ls-2
Visual Demo
The code below will demostrate the classes.Lorem Ipsum ls-n2
Lorem Ipsum ls-n1
Lorem Ipsum ls-0
Lorem Ipsum ls-1
Lorem Ipsum ls-2
Theme Colors Shades
Bootstrap 5 brings theme color utility classes for text and background.
NinjaBootstrap builds shade variations, enabling a more nuanced palette, that is fully compatible with the Dark Mode introduced in Bootstrap 5.3: when Dark Mode is enabled, the color scale is reversed.
Text Color
Allows to set the color CSS property and assign it to theme color values.
Syntax
text-{color}-{value}
Accepted {color} values: primary | secondary | success | danger | warning | info | light | dark
Accepted {value} values: 25 | 50 | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900
Sample classes: text-primary-200 | text-secondary-100 | [...]
Visual Demo
Here is a quick demo of the classes above. Please note that colors are mapped to our custom primary variable value.Background Color
Allows to set the background color CSS property and assign it to theme color values.
Syntax
bg-{color}-{value}
Accepted {color} values: primary | secondary | success | danger | warning | info | light | dark
Accepted {value} values: 25 | 50 | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900
Sample classes: bg-primary-200 | bg-secondary-100 | [...]