Bootstrap Extensions

This repository contains a set of extensions for Bootstrap 4's utility classes.

I consistently find myself adding these to projects, so I'm making the available to anyone that wants to use them.

Usage

<link src="/node_modules/bootstrap-extensions/dist/bootstrap-extensions.css">

You can also build with your project by importing build.scss as long as you are using sass: @import "/node_modules/bootstrap-extensions/build.scss";

** You can also only important the files you want as they all work indepedently of each other.

Typograpy
- Font Size
- Font Weight
Positioning
- Position
- Location
Overflow
Cursor
Opacity

Typography

Font Weight

All font weights (100-900) are available.

.fw-100
...
.fw-900

Example:

.fw-100 {
    font-weight: 100 !important;
}

Positioning

Position

.position-absolute
.position-fixed
.position-relative
.position-static
.position-sticky

Example:

.position-absolute {
    position: absolute !important
}

Location

Position for left, right, top bottom with the values of 0, 50%, and 100%;

.left-0, .left-50, .left-100
.right-0, .right-50, .right-100
.top-0, .top-50, .top-100
.bottom-0, .bottom-50, .bottom-100

Exmaples:

.left-0 {
    left: 0 !important;
}
.left-50 {
    left: 50% !important;
}
.left-100 {
    left: 100% !important;
}

Overflow

Overflow for each property (overflow (o), overflow-y (oy), overflow-x (ox)) and value hidden and scroll.

.o-hidden, .o-scroll
.ox-hidden, .ox-scroll
.oy-hidden, .oy-scroll

Example:

.o-hidden {
    overflow: hidden !important;
}

Cursor

All available cursors can be referenced via c-stylename:

.c-pointer {
    cursor: pointer;
}

Cursor

Opacity at .5 increments from 0-.95:

.opacity-25 {
    opacity: .25;
}

Additions

If you'd like to see additions, feel free to submit a pull request.