Victoria Baker
Senior developer

Content - Helper Classes

Statistics Invoices Schedule
Home Content Helper classes
Support
Settings
Account security Analytics Accessibility
All settings
Helper classes
Besides basic typography classes, helper classes are an extra set of additional predefined classes, that can be applied to different content or layout elements and components. Helper classes are custom additions mostly, written especially for current layout, except common BS helpers. Below is a summarized table with all available classes, descriptions and content type. Flex utilities are moved to a separate page and include various examples.
Borders
.border-0 Any element Use this class to remove all borders from an element
.border-[side]-0 Any element Use this class to remove specific borders. Available [side] options: left, right, top, bottom.
.border-width-0 Any element Sets border width to 0. Useful for inheriting other border properties
.border Any element Adds a border to an element with pre-defined BS's default width and color properties
.border-[size] Any element Adds the border to an element. Available [size] options: 1 - default border width (1px); 2 - double width (2px); 3 - tripple width (3px)
.border-[side]-[size] Any element Same as .border-[size], but for specific [side]: left, right, top, bottom
.border-[color] Any element Changes color of all element's borders. Supports all available color classes, including transparent option
.border-[side]-[color] Any element If you need to change color of some specific border, use this class combination. Options for [side]: left, right, top, bottom
.rounded Any element Rounds all borders. Default value is defined in $border-radius variable
.rounded-[side] Any element Rounds borders of specific [side]: top, bottom, left, right
.rounded-0 Any element Removes rounded corners from all borders
.rounded-[side]-0 Any element Removes rounded corners from specific [side]: top, bottom, left, right
.rounded-pill Any element Adds 100px border radius to all borders
.rounded-[side]-round Any element Adds 100px border radius to specific [side]: top, bottom, left, right
.rounded-circle Any element Adds 50% border radius to all borders
Transformations
.rotate-[value] Any element Rotates element clockwise. Options for [value]: 45, 90, 180 degrees
.rotate-[value]-inverse Any element Same as .rotate-[value], but rotation is counterclockwise. Options for [value] are the same as well
.spinner Any element Adds infinite clockwise rotation
.spinner-reverse Any element Adds infinite counterclockwise rotation
Positioning
.position-[value] Any element Changes element's positiion. Available options for [value]: relative, static, absolute, fixed, sticky
.fixed-[top, bottom] Any element Position an element at the top (bottom) of the viewport, from edge to edge
.top-[0, auto] All except static Resets top property for fixed, absolute and relative opsitions
.bottom-[0, auto] All except static Resets bottom property for fixed, absolute and relative opsitions
.left-[0, auto] All except static Resets left property for fixed, absolute and relative opsitions
.right-[0, auto] All except static Resets right property for fixed, absolute and relative opsitions
.translate-middle All Applies translate(-50%, -50%) to the element. Example is floating badges, that also require .left-100 and .top-0 classes
.translate-[x|y]-middle All Same as above, but in this particular case centers only vertical or horizontal axis
Alignment
.float-[side] Any element Element floating. Options for [side]: left, right sides
.float-[breakpoint]-[side] Any element Responsive variations of element floating. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.float-none Any element Removes floating
.clearfix Any element Easily clear floats by adding .clearfix to the element
.text-[side] Inline element, text Element alignment. Options for [side]: left, center, right sides
.text-[breakpoint]-[side] Inline element, text Responsive variations of element alignment. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.align-[value] Inline element, table Vertical alignment. Options for [value]: baseline, top, middle, bottom, text-top and text-bottom
Images
.img-fluid Images only Applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element
.img-thumbnail Images only Adds grey frame with white background color
Sizing
.wmin-[size] Any element Sets a minimum width of the element in pixels. Available options for [size]: 200, 250, 300, 350, 400, 450, 500, 550, 600 pixels
.wmin-[breakpoint]-[size] Any element Responsive variations of width utilities. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.w-[25, 50, 75, 100] Any element Sets a width of the element in percents
.w-auto Any element Sets the width of an element to auto (width reset)
.w-[breakpoint]-auto Any element Responsive variations of width reset utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.h-[25, 50, 75, 100] Any element Sets a height of the element in percents
.h-auto Any element Sets the height of an element to auto (height reset)
Visibility
.overflow-[value] Containers Content overflow utility. Available options for [value]: hidden - hides content, visible - shows content, auto - makes content scrollable
.visible Containers Makes the element invisible for the user, but visible for screen readers
.invisible Containers Can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document
.text-hide Text only Helps replace an element's text content with a background image
.sr-only Any element Hides an element to all devices except screen readers
Display
.d-block Any element Displays an element as a block element
.d-[breakpoint]-block Any element Responsive variations of d-block utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.d-inline-block Any element Displays an element as an inline-level block container
.d-[breakpoint]-inline-block Any element Responsive variations of d-inline-block utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.d-inline Any element Displays an element as an inline container
.d-[breakpoint]-inline Any element Responsive variations of d-inline utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.d-table Any element Displays an element as a table element
.d-[breakpoint]-table Any element Responsive variations of d-table utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.d-table-cell Any element Displays an element as a table cell element
.d-[breakpoint]-table-cell Any element Responsive variations of d-table-cell utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.d-flex Any element Displays an element as a block-level flex container
.d-[breakpoint]-flex Any element Responsive variations of d-flex utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.d-inline-flex Any element Displays an element as an inline-level flex container
.d-[breakpoint]-inline-flex Any element Responsive variations of d-inline-flex utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.d-none Any element Hides the element (has no effect on layout)
.d-[breakpoint]-none Any element Responsive variations of d-none utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
Spacing
.m-[size] Any element Adds margin property to all sides. Available [size] are: 0, 1 ~ 5px, 2 ~ 10px, 3 ~ 20px, 4 ~ 30px, 5 ~ 40px, auto
.m-[breakpoint]-[size] Any element Responsive variations of .m-[size] utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.m[l,r,t,b,x,y]-[size] Any element Adds margin property to the specific side: l - left, r - right, t - top, b - bottom, x - horizontal, y - vertical. Options for the size are the same
.m[l,r,t,b]-[breakpoint]-[size] Any element Same as for .m-[breakpoint]-[size], except x and y options
.p-[size] Any element Adds padding property to all sides. Available [size] are: 0, 1 ~ 5px, 2 ~ 10px, 3 ~ 20px, 4 ~ 30px, 5 ~ 40px, auto
.p-[breakpoint]-[size] Any element Responsive variations of .p-[size] utility. Options for [breakpoint]: sm, md, lg, xlg screen sizes
.p[l,r,t,b,x,y]-[size] Any element Adds padding property to the specific side: l - left, r - right, t - top, b - bottom, x - horizontal, y - vertical. Options for the size are the same
.p[l,r,t,b]-[breakpoint]-[size] Any element Same as for .p-[breakpoint]-[size], except x and y options
.ml-2 Inline elements Adds extra left margin to the element (mostly for icons and badges)
.mr-2 Inline elements Adds extra right margin to the element (mostly for icons and badges)
Text
.font-size-[value] Text Sets/overrides font size. Available [value] options: base ~ 13px, xs ~ 11px; sm - 12px, lg ~ 14px
.line-height-[value] Text Makes it 20px despite the font size. Available [value] options: base, xs; sm, lg
Misc
.cursor-[value] Any element Changes cursor style. Available [value] options: move, pointer and default styles
.shadow-none Any element Removes shadow from element
[data-fouc] jQuery plugins This is an attribute that partially helps to fix FOUC issue. It sets opacity to 0 and other properties to match styled component size. So that you won't see unstyled content flashing when plugin gets initialized.