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.

Table of Contents

• 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;
}

Font Size

Font sizes from .25em through 5em via .25em increments starting at fs-1.

• .fs-1
• ...
• .fs-20

Example:

.fs-1 {
    font-size: .25em !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.

License

MIT © Matt Landers