Download
Helpers

Helpers

A set of short helper classes to change varouis css-properties

Names like .classname-{breakpoints} denotes an additional set of classes for calling the property on different screen resolutions with values:

.classname-xl — < 1240px
.classname-lg — < 1024px
.classname-md — < 768px
.classname-sm — < 540px
.classname-xs — < 375px

Names .classname-touch - property will be calling when viewed from a touch device


Visible properties

.invisible
.invisible-{breakpoints}
.invisible-touch
opacity: 0;
pointer-events: none;

.visible
.visible-{breakpoints}
.visible-touchopacity: 1;
pointer-events: all;

.hide-{breakpoints}
.hide-touchdisplay: none !important;

.show-{breakpoints}
.show-touchdisplay: block !important;

Display properties

.display-block
display: block;

.display-none
display: none;

.display-inline
display: inline;

.inline-block
display: inline-block;
vertical-align: baseline;

.inline-block-top
display: inline-block;
vertical-align: top;

.inline-block-mddisplay: inline-block;
vertical-align: middle;

.inline-block-bottom
display: inline-block;
vertical-align: bottom;

.table
display: table;

.table-row
display: table-row;

.table-cell
display: table-cell;

.table-cell-top
display: table-cell;
vertical-align: top;

.table-cell-md
display: table-cell;
vertical-align: middle;

.table-cell-bottom
display: table-cell;
vertical-align: bottom;

Flexbox
Flex containers

.flex-rowdisplay: flex;
flex-direction: row;

.flex-row

div
div

.flex-row-mddisplay: flex;
flex-direction: row;
align-items: center;

.flex-row-md

div
div

.flex-row-bottomdisplay: flex;
flex-direction: row;
align-items: flex-end;

.flex-row-bottom

div
div

.flex-row-centerdisplay: flex;
flex-direction: row;
justify-content: center;

.flex-row-center

div
div

.flex-row-md-centerdisplay: flex;
flex-direction: row;
align-items: center;
justify-content: center;

.flex-row-md-center

div
div

.flex-coldisplay: flex;
flex-direction: column;

.flex-col

div
div

.flex-col-mddisplay: flex;
flex-direction: column;
justify-content: center;

.flex-col-md

div
div

.flex-col-bottomdisplay: flex;
flex-direction: column;
justify-content: flex-end;

.flex-col-bottom

div
div

.flex-col-centerdisplay: flex;
flex-direction: column;
align-items: center;

.flex-col-center

div
div

.flex-col-md-centerdisplay: flex;
flex-direction: column;
justify-content: center;
align-items: center;

.flex-col-md-center

div
div
Flex items

.flex-{0-13}

.flex-row

.flex-5
.flex-1
Opacity properties
.opacity-{0-9}
.opacity-3
.opacity-8
Background properties

.bg-info
.bg-success
.bg-warning
.bg-alert
.bg-dark
.bg-mute
.bg-gray
.bg-light

.bg-info
.bg-success
.bg-warning
.bg-alert
.bg-dark
.bg-mute
.bg-light
.bg-gray