Fight "class creep" by adding breakpoint suffixes to Bootstrap v4's utility classes.
- applies Bootstrap's "size 1" margin to all sides (the
- at Bootstrap breakpoints greater than medium (
As a web project grows – and particularly as new contributors begin making changes to CSS – it's common for simple utilities to be used and re-used in dozens of ways. Without using "breakpointified" utilities, each usage tends to add both to the project weight and to the difficulty of grokking the entirety of the project's CSS.
Especially when "one-use" classes are repeatedly developed (eg: when a website contains multiple very unique landing pages), many projects tend to grow a base of "write-only CSS" (becuase editing "old" CSS is tedious and requires good visual testing).
Using "breakpointified" utilities can help slow this "class creep" in your projects.
bower install bootstrap-breakpointify
Note: this library must be
@imported after bootstrap, as it requires Bootstrap's responsive breakpoint mixins.
Breakpoint suffixes are appended to the end of the normal classes. See the bootstrap docs for more information. All suffixes begin with either
gt ("greater than") or
lt ("less than").
"Greater-than" suffixes apply the class at the following Bootstrap breakpoints.
"Less-than" suffixes apply the class at the following Bootstrap breakpoints.
This library "breakpointifies" all of Bootstrap's utility clases.
Properties – First Character
- m –
- p -
Direction(s) – Second Character
- t -
- r -
- b -
- l -
- x -
- y -
- a –
all(all of the above:
Size – Third Character
- 0 –
- 1 –
normal(the relevant Bootstrap
- 2 –
size 2(the relevant Bootstrap "size 2" value – by default,
$spacer * 1.5)
- 3 –
size 3(the relevant Bootstrap "size 3" value – by default,
$spacer * 3)
large– remove margin from all sides at breakpoints greater than Bootstrap's large (
medium– apply "size 3" margin-bottom at breakpoints greater than Bootstrap's medium (
medium– apply normal padding-top at breakpoints less than Bootstrap's medium (
What about unused CSS classes?
You could use UnCSS to programmatically remove unused CSS, but it's likely not worth the savings.
Browser rendering performance is not impacted by unused CSS classes, and this entire library adds the equivalent of a small icon to your page weight. Ensure your stylesheets are served with gzip compression for best optimization.