Uihub

Appearance

Utility Classes Documentation ​

This document provides an overview of utility classes to streamline your CSS styling. Use these classes to control text alignment, display behavior, borders, layout, margins, padding, and more.

Text Alignment ​

  • .text-center: Centers text.
  • .text-left: Aligns text to the left.
  • .text-right: Aligns text to the right.

Display ​

  • .d-block: Sets display to block.
  • .d-inline: Sets display to inline.
  • .d-inline-block: Sets display to inline-block.

Borders ​

  • .border: Adds a 1px solid border.
  • .no-border: Removes any border (using !important).
  • .border-bottom: Adds a bottom border.
  • .bordered: Adds a soft border around elements except for .data-table.

Border Radius ​

  • .rounded: Adds a 4px border radius.

Font Styling ​

  • .text-small, .small-text: Sets font size to 14px.
  • .font-bold, .text-bold: Sets font weight to bold.
  • .text-muted: Sets text color to muted grey and bold font weight.

Visibility ​

  • .hidden: Hides the element (display: none).
  • .visible: Shows the element (display: block).
  • .d-none: Forcibly hides the element (display: none !important).

Flexbox ​

  • .flex: Enables flexbox layout with justify-content: space-between and align-items: center.
  • .flex-start: Aligns items to the start.
  • .flex-center: Centers items.
  • .flex-end: Aligns items to the end.
  • .flex-item: Expands flex item to take available space.
  • .flex-align-start: Aligns items to the start vertically.

Responsive Flex Direction ​

  • .dy-flex-sm-col: Sets flex direction to column on screens ≤ 576px.
  • .dy-flex-md-col: Sets flex direction to column on screens ≤ 768px.
  • .dy-flex-lg-col: Sets flex direction to column on screens ≤ 1024px.
  • .dy-flex-xlg-col: Sets flex direction to column on screens > 1024px.

Cursor ​

  • .pointer: Changes cursor to pointer.

Margin Utilities ​

  • .m-0 to .m-3: Sets margin to 0, 0.25rem, 0.5rem, or 1rem.
  • .mb-0 to .mb-3: Sets bottom margin to 0, 0.25rem, 0.5rem, or 1rem.
  • .my-0 to .my-3: Sets vertical (top and bottom) margin.
  • .mt-0 to .mt-3: Sets top margin.

Padding Utilities ​

  • .p-1 to .p-4: Sets padding to 0.25rem, 0.5rem, 1rem, or 2rem.
  • .p-5: Sets padding to 4rem.

Gap Utilities ​

  • .gap-1 to .gap-6: Sets gap for flex or grid layouts to increasing increments from 0.25rem to 8rem.
  • .col-gap-1 to .col-gap-3: Sets column gap for grid layouts.
  • .row-gap-1 to .row-gap-3: Sets row gap for grid layouts.

Additional Layout Utilities ​

  • .complex-form-group: Aligns items at the start in a flex layout.
  • .space-between: Justifies content with space between items.
  • .space-around: Justifies content with space around items.
  • .align-center: Centers items vertically.

Miscellaneous Utilities ​

  • .width-100: Sets width to 100%.
  • .bg-muted: Adds a light grey background color.
  • .no-wrap: Prevents wrapping of flex items.
  • .place-first: Orders the element to appear first in a flex layout.
  • .disabled, [disabled]: Styles disabled elements with grey color, disables pointer events.

Text Colors ​

  • .text-primary: Applies the primary color.
  • .text-warning: Applies the warning color.
  • .text-danger: Applies the danger color.
  • .text-success: Applies the success color.

Components ​

Cards ​

  • .card: A basic card component with padding, rounded corners, and a white background.
  • .card-raised-10 to .card-raised-50: Adds varying shadow intensities for raised card effects.
  • .card-raised-10-hover to .card-raised-50-hover: Adds hover effect with shadows.