Skip to content

Utility Helpers

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


align-topVertically align to the top
align-bottomVertically align to the bottom
align-middleVertically align to the middle
align-baselineVertically align to the baseline


clearfixClear a floating element



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.

b-whiteSets the background color to white
b-blackSets the background color to black
b-primarySets the background color to primary
b-secondarySets the background color to secondary
c-whiteSets the text color to white
c-blackSets the text color to black
c-primarySets the text color to primary
c-secondarySets the text color to secondary


disabledShow the not-allowed cursor
moveShow the move cursor
pointerShow the pointer cursor


d-blockDisplay as a block element
d-hiddenDisplay as a hidden element, includes [x-cloak] for alpine.js
d-flexDisplay as a flex element
d-gridDisplay as a grid element
d-inlineDisplay as an inline element
d-inline-blockDisplay as an inline block element
d-inline-flexDisplay as an inline flex element
d-tableDisplay as a table element
d-table-cellDisplay as a table-cell element



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

flex-rowSets the direction to row
flex-columnSets the direction to column
flex-row-reverseSets the direction to row reverse
flex-column-reverseSets the direction to column reverse
justify-content-startJustify child items to start
justify-content-endJustify child items to end
justify-content-centerJustify child items to center
justify-content-betweenJustify child items to between
justify-content-aroundJustify child items to end
align-items-startAlign child items to start
align-items-endAlign child items to end
align-items-centerAlign child items to center
align-items-baslineAlign child items to basline
align-items-stretchAlign child items to stretch
flex-nowrapSingle-line which may cause the container to overflow
flex-wrapMulti-lines, direction is defined by flex-direction
flex-wrap-reverseMulti-lines, opposite to direction defined by flex-direction


pull-leftFloat an element to the left
pull-rightFloat an element to the right


img-fluidMake an image responsive and use the full width but no more


list-style-noneRemove bullets from lists ul and ol
list-style-resetRemove list style, padding and margin from lists ul and ol


noscrollSets overflow to hidden
scroll-xAllow scrolling horizontally when required


fixedSets position to fixed
relativeSets position to relative
absoluteSets position to absolute


no-printHides this element when printing


full-heightSets the height to 100%
full-visual-heightSets the height to 100% if the visual height
full-widthSets the width to 100%
max-full-widthSets the maximum width to 100%


margin-zeroSets margin to zero
m-autoSets margin to auto
mt-autoSets margin top to auto
mr-autoSets margin right to auto
mb-autoSets margin bottom to auto
ml-autoSets margin left to auto
push-autoSets margin left and right to auto


text-leftSets text alignment to left
text-rightSets text alignment to right
text-centerSets text alignment to center
text-justSets text alignment to justify
strongSets font weight as $strong-font-weight
leadSets font weight to $lead-font-weight
mutedSets the opacity as $muted-opacity
nowrapStops the text from wrapping
smallSets the font size to $small-font-size
uppercaseMakes the text uppercase
text-shadowApplies a shadow to the text


flip-xFlips an element on its horizontal axis
flip-yFlips an element on its vertical axis
flip-bothFlips an element on both axis


preload-transitions Sets all transitions to none, tipically used during page loads then removed when loaded to stop a flickering effect. See usage below.
<body class="preload-transitions">
    <!-- place at end of body -->
    <script type="text/javascript">
            let node = document.querySelector(".preload-transitions");



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

For more details on breakpoints see the grid section.

hidden-xsHide this element on the xs breakpoint only
hidden-smHide this element on the sm breakpoint only
hidden-mdHide this element on the md breakpoint only
hidden-lgHide this element on the lg breakpoint only
hidden-xlHide this element on the xl breakpoint only
hidden-xs-downHide this element on the xs breakpoint and lower
hidden-sm-downHide this element on the sm breakpoint and lower
hidden-md-downHide this element on the md breakpoint and lower
hidden-lg-downHide this element on the lg breakpoint and lower
hidden-xl-downHide this element on the xl breakpoint and lower
hidden-xs-upHide this element on the xs breakpoint and higher
hidden-sm-upHide this element on the sm breakpoint and higher
hidden-md-upHide this element on the md breakpoint and higher
hidden-lg-upHide this element on the lg breakpoint and higher
hidden-xl-upHide this element on the xl breakpoint and higher