Your utility class toolkit

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 ->

Getting Started

Installing NinjaBootstrap via NPM

NinjaBootstrap can be installed in any project, via NPM or simple CDN , as a drop-in Bootstrap replacement,

Download on GitHub

$ npm install ninjabootstrap

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" >

File: "ninjabootstrap/_positioning.scss"

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-0
	top-0 end-0
	top-50 start-50
	bottom-50 end-50
	bottom-0 start-0
	bottom-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>

File: "ninjabootstrap/_sizing.scss"

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-5
	w-10
	w-15
	w-20
	w-25
	w-30
	w-35
	w-40
	w-45
	w-50
	w-55
	w-60
	w-65
	w-70
	w-75
	w-80
	w-85
	w-90
	w-95
	w-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-5
	h-10
	h-15
	h-20
	h-25
	h-30
	h-35
	h-40
	h-45
	h-50
	h-55
	h-60
	h-65
	h-70
	h-75
	h-80
	h-85
	h-90
	h-95
	h-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

File: "ninjabootstrap/_borders.scss"

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>

File: "ninjabootstrap/_letter-spacing.scss"

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

File: "ninjabootstrap/_theme-colors-shades.scss"

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.

text-primary-25

text-primary-50

text-primary-100

text-primary-200

text-primary-300

text-primary-400

text-primary

text-primary-600

text-primary-700

text-primary-800

text-primary-900

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 | [...]

Visual Demo

Here is a quick demo of the classes above. Please note that colors are mapped to our custom primary variable value.

bg-primary-25

bg-primary-50

bg-primary-100

bg-primary-200

bg-primary-300

bg-primary-400

bg-primary

bg-primary-600

bg-primary-700

bg-primary-800

bg-primary-900