Your utility class toolkit utility classes for bootstrap

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 logo

SASS

SHURIKEN

😜

Getting Started -> Read the introduction article ->

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?

Picostrap wordpress theme

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/_variables.scss"

Spacing

Bootstrap offers by default 5 responsive spacing steps. These values are used to build the margin and padding utility classes, with their responsive variations.
NinjaBootstrap boosts this value to 10, for more design flexibility, and enables negative margins as well.

Margin and Padding

Allows to set margin and padding CSS properties.

Syntax

{property}{sides}-{size} and, for responsive: {property}{sides}-{breakpoint}-{size}

Accepted {property} values: m for margin | p for padding

Accepted {sides} values: t  for top | b for bottom | s for start (left) | e for end (right)| x for horizontal | y for vertical

Accepted {size} values: from 1 to 10 for positive padding and margin | from n1 to n10 for negative margin

Sample classes: | pb-3 | ms-1 | ms-lg-3 | mt-lg-n10 (This applies a negative margin of 10, only on large screens and above) 

Usage example

The code below will make the element have a margin top of 1 rem, on mobile devices, and 6 rem from the large breakpoint onwards. 
HTML CODE<div class="mt-3 mt-lg-7">HELLO WORLD</div>
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

Max Width

Allows to set the Max Width CSS property.

Syntax

mw-{breakpoint}-{value}

Accepted {value} values: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | none

Sample classes: mw-2 | mw-lg-5

Visual Demo

The code below will demostrate the classes. 

	
mw-1

	
mw-2

	
mw-3

	
mw-4

	
mw-5

	
mw-6

	
mw-7

	
mw-8

	
mw-9

	
mw-10

	
mw-11

	
mw-none

Min-Viewport Height

Allows to set the min-height CSS property in viewport height units.

Syntax

min-vh-{breakpoint}-{value}

Accepted {value} values:  25 | 50 | 75 | 100

Sample classes: min-vh-lg-25 |  min-vh-50 | min-vh-xl-75


	
min-vh-25

	
min-vh-50

	
min-vh-75

	
min-vh-100
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-x:

25
50
100
200
300
400
---
primary
600
700
800
900

bg-secondary-x:

25
50
100
200
300
400
---
secondary
600
700
800
900

bg-success-x:

25
50
100
200
300
400
---
success
600
700
800
900

bg-danger-x:

25
50
100
200
300
400
---
danger
600
700
800
900

bg-warning-x:

25
50
100
200
300
400
---
warning
600
700
800
900

bg-info-x:

25
50
100
200
300
400
---
info
600
700
800
900

bg-light-x:

25
50
100
200
300
400
---
light
600
700
800
900

bg-dark-x:

25
50
100
200
300
400
---
dark
600
700
800
900
File: "ninjabootstrap/_tailwind_grays.scss"

Tailwind Greys

Ninja Bootstrap brings the expertly-crafted grays' palette with a shade variations.
You can control the text and the background color of an element using the text and the background greys. Tailwind greys colors comes very useful for text.
Please remember to customize those variables for dark mode.

Text and Background Greys

Allows to set the greys CSS property and assign it to theme color values.

Syntax

text-{greys}-{value}

bg-{greys}-{value}

Accepted {color} values: Slate | Gray | Zinc | Neutral | Stone

Accepted {value} values: 50 | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900

Sample classes: text-slate-200 | bg-neutral-700 | [...]

Visual Demo

Here is a quick demo of the classes above.

slate:

50
100
200
300
400
500
600
700
800
900

gray:

50
100
200
300
400
500
600
700
800
900

zinc:

50
100
200
300
400
500
600
700
800
900

neutral:

50
100
200
300
400
500
600
700
800
900

stone:

50
100
200
300
400
500
600
700
800
900
File: "ninjabootstrap/bootstrap_all_colors"

All Colors

[OPTIONAL] Ninja Bootstrap can brings all the bootstrap color palette with a hige shade variations.
You can control the text and the background color of an element using the text and the background of all colors.

Text and Background Colors

Allows to set the color CSS property and assign it to theme color values.

Syntax

text-{color}-{value}

bg-{color}-{value}

Accepted {color} values: Blue | Indigo | Purple | Pink | Red | Orange | Yellow | Green | Teal | Cyan

Accepted {value} values: 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900

Sample classes: text-purple-200 | bg-pink-700 | [...]

Visual Demo

Here is a quick demo of the classes above.

purple:

100
200
300
400
500
600
700
800
900

indigo:

100
200
300
400
500
600
700
800
900

pink:

100
200
300
400
500
600
700
800
900

red:

100
200
300
400
500
600
700
800
900

orange:

100
200
300
400
500
600
700
800
900

yellow:

100
200
300
400
500
600
700
800
900

green:

100
200
300
400
500
600
700
800
900

teal:

100
200
300
400
500
600
700
800
900

cyan:

100
200
300
400
500
600
700
800
900