Karma CSS

Utility Helpers

Below is a list of all the utilites and their description within KarmaCSS.

Alignment

Class Description
align-top Vertically align to the top
align-bottom Vertically align to the bottom
align-middle Vertically align to the middle
align-baseline Vertically align to the baseline

Clearfix

Class Description
clearfix Clear a floating element

Colour

Usage

The colour helpers are created from the colours defined within the variables. By adding more, these will also be created as helpers.

The below are just a selection:

  • white
  • black
  • primary
  • secondary

You can also get a colour by using the provided function. See the Colours section for more details.

Class Description
b-white Sets the background color to white
b-black Sets the background color to black
b-primary Sets the background color to primary
b-secondary Sets the background color to secondary
c-white Sets the text color to white
c-black Sets the text color to black
c-primary Sets the text color to primary
c-secondary Sets the text color to secondary

Cursor

Class Description
disabled Show the not-allowed cursor
move Show the move cursor
pointer Show the pointer cursor

Display

Class Description
d-block Display as a block element
d-hidden Display as a block element
d-flex Display as a flex element
d-grid Display as a grid element
d-inline Display as an inline element
d-inline-block Display as an inline block element
d-inline-flex Display as an inline flex element
d-table Display as a table element
d-table-cell Display as a table-cell element

Flex

Usage

Use all the below with d-flex on the container of the items to be flexed.

A good resource on flex can be found at css-tricks.com.

Class Description
flex-row Sets the direction to row
flex-column Sets the direction to column
flex-row-reverse Sets the direction to row reverse
flex-column-reverse Sets the direction to column reverse
Class Description
justify-content-start Justify child items to start
justify-content-end Justify child items to end
justify-content-center Justify child items to center
justify-content-between Justify child items to between
justify-content-around Justify child items to around
Class Description
align-items-start Align child items to start
align-items-end Align child items to end
align-items-center Align child items to center
align-items-basline Align child items to basline
align-items-stretch Align child items to stretch
Class Description
flex-nowrap single-line which may cause the container to overflow
flex-wrap multi-lines, direction is defined by flex-direction
flex-wrap-reverse multi-lines, opposite to direction defined by flex-direction

Align Self Usage

These are set on the child items of the flex container

Class Description
align-self-start Align self to start
align-self-end Align self to end
align-self-center Align self to center
align-self-between Align self to between
align-self-around Align self to around

Float

Class Description
pull-left Float an element to the left
pull-right Float an element to the right

Image

Class Description
img-fluid Make an image responsive and use the full width but no more

List

Class Description
list-style-none Remove bullets from lists ul and ol
list-style-reset Remove list style, padding and margin ul and ol

Overflow

Class Description
noscroll Sets overflow to hidden
scroll-x Allow scrolling horizontally when required

Position

Class Description
fixed Sets position to fixed
relative Sets position to relative
absolute Sets position to absolute

Print

Class Description
no-print Hides this element when printing

Sizing

Class Description
full-height Sets the height to 100%
full-visual-height Sets the height to 100% if the visual height
full-width Sets the width to 100%
max-full-width Sets the maximum width to 100%

Spacing

Class Description
margin-zero Sets margin to zero
m-auto Sets margin to auto
mt-auto Sets margin top to auto
mr-auto Sets margin right to auto
mb-auto Sets margin bottom to auto
ml-auto Sets margin left to auto
push-auto Sets margin left and right to auto

Text

Class Description
text-left Sets text alignment to left
text-right Sets text alignment to right
text-center Sets text alignment to center
text-just Sets text alignment to justify
strong Sets font weight as $strong-font-weight
lead Sets font weight to $lead-font-weight
muted Sets the opacity to 0.7
nowrap Stops the text from wrapping
small Sets the font size to $small-font-size
uppercase Makes the text uppercase
text-shadow Applies a shadow to the text

Transform

Class Description
flip-x Flips an element on its horizontal axis
flip-y Flips an element on its vertical axis
flip-both Flips an element on both axis

Visibility

Usage

The below depends on the configured grid breakpoints xs, sm, md, lg, xl

For more details on breakpoints see Responsive Breakpoints or Grid Options.

Class Description
hidden-xs Hide this element on the xs breakpoint only
hidden-sm Hide this element on the sm breakpoint only
hidden-md Hide this element on the md breakpoint only
hidden-lg Hide this element on the lg breakpoint only
hidden-xl Hide this element on the xl breakpoint only
hidden-xs-down Hide this element on the xs breakpoint and lower
hidden-sm-down Hide this element on the sm breakpoint and lower
hidden-md-down Hide this element on the md breakpoint and lower
hidden-lg-down Hide this element on the lg breakpoint and lower
hidden-xl-down Hide this element on the xl breakpoint and lower
hidden-xs-up Hide this element on the xs breakpoint and lower
hidden-sm-up Hide this element on the sm breakpoint and higher
hidden-md-up Hide this element on the md breakpoint and lower
hidden-lg-up Hide this element on the lg breakpoint and lower
hidden-xl-up Hide this element on the xl breakpoint and lower