bootstrap-extensions v1.2.2
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
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