This article provides a reference for some of the CSS classes available in ShareDo for styling basic elements like text, form builder fields, sections, etc.

Text color

Bootstrap/theme

• text-primary - primary theme colour
• text-success - green
• text-warning - amber
• text-danger - red
• text-info - blue
• text-muted - light grey

Hover

• hover-primary - primary theme colour on hover
• hover-success - green on hover
• hover-warning - amber on hover
• hover-danger - red on hover

Custom ShareDo

• text-urgent - red
• text-important - amber
• text-notice - green
• text-default - black
• text-status-success - green
• text-status-failure - red

Background colour

Bootstrap/theme

• bg-primary - primary theme colour background
• bg-success - green background
• bg-warning - amber background
• bg-danger - red background
• bg-info - blue background

Hover

• hover-primary-bg - primary theme colour background on hover
• hover-success-bg - green background on hover
• hover-warning-bg - amber background on hover
• hover-danger-bg - red background on hover

Custom sharedo

• background-gray - grey background
• background-important - amber background
• background-urgent - red background
• background-success - green background

Alert

• alert alert-success - green background and text
• alert alert-info - blue background and text
• alert alert-warning - amber background and text
• alert alert-error - red background and text

It is sometimes necessary to add display-block to the above for correct margins.

Borders

Border style

• border-primary-1 - 1px primary theme colour border (also -2 or -3)
• border-success-1 - 1px green border
• border-warning-1 - 1px orange border
• border-danger-1 - 1px red border

Border colour

• border-primary - theme colour border
• border-left-primary - theme colour left border
• border-left-success - green left border
• border-left-warning - amber left border
• border-left-danger - red left border

Typography

Font weight

• font-weight-bold - bold font
• font-weight-normal - normal font

Font size

• small - small font
• h1, h2, etc - larger font sizes

Font style

• text-italic - italic

Text align

• text-left - align left
• text-center - align centre
• text-right - align right
• text-justify - justify text

Text decoration

• underline - underline
• no-underline - no underline
• hover:underline - underline on hover
• hover:no-underline - no underline on hover

Text overflow

• text-overflow - truncate text with ellipsis (don't wrap)

Text transformation

• text-lowercase - lowercase
• text-uppercase - uppercase
• text-capitalize - capitalize

Whitespace

• text-nowrap - don't allow word breaks

Spacing

Margin

• m-0 / no-margins - remove margin
• m-1, m-2 etc - margin 4px/8px/…
• mt-0, mt-1 etc - top margin 0px/4px/…
• mb-0, mb-1 etc - bottom margin 0px/4px/…
• ml-0, ml-1 etc - left margin 0px/4px/…
• mr-0, mr-1 etc - right margin 0px/4px/…

Padding

• p-0 / no-padding - remove padding
• p-1, p-2 etc - padding 4px/8px/…
• pt-0, pt-1 etc - top padding 0px/4px/…
• pb-0, pb-1 etc - bottom padding 0px/4px/…
• pl-0, pl-1 etc - left padding 0px/4px/…
• pr-0, pr-1 etc - right padding 0px/4px/…

Layout

• display-inline - display inline
• display-inline-block - display inline-block
• display-block - display block
• overflow-hidden - overflow hidden

Interactivity

Cursor

• cursor-pointer - cursor pointer (hand) icon
• cursor-move - cursor move icon