Helperclasses v2 - StyleGuide

= not available in Styleguide

= only available in Styleguide

Colors

Gray dotted border

Bootstrap provides helper classes out of the box on border, border thickness, border placement (top, right, bottom, left), border radius (top, right, bottom, left), three dropshadows, margins, paddings and many more. See Bootstrap documentation for more.

Here are some custom helper classes we have

I'm just a div with the class .dottedBorder

Colour palette

Branding

Branding 1, 2, and gray

txt-branding-1-50

txt-branding-1-100

txt-branding-1-200

txt-branding-1-300

txt-branding-1-400

txt-branding-1-500

txt-branding-1-600

txt-branding-1-700

txt-branding-1-800

txt-branding-1-900

border-branding-1-50

border-branding-1-100

border-branding-1-200

border-branding-1-300

border-branding-1-400

border-branding-1-500

border-branding-1-600

border-branding-1-700

border-branding-1-800

border-branding-1-900

bg-branding-1-50

bg-branding-1-100

bg-branding-1-200

bg-branding-1-300

bg-branding-1-400

bg-branding-1-500

bg-branding-1-600

bg-branding-1-700

bg-branding-1-800

bg-branding-1-900

border-branding-2-50

border-branding-2-100

border-branding-2-200

border-branding-2-300

border-branding-2-400

border-branding-2-500

border-branding-2-600

border-branding-2-700

border-branding-2-800

border-branding-2-900

txt-branding-2-50

txt-branding-2-100

txt-branding-2-200

txt-branding-2-300

txt-branding-2-400

txt-branding-2-500

txt-branding-2-600

txt-branding-2-700

txt-branding-2-800

txt-branding-2-900

bg-branding-2-50

bg-branding-2-100

bg-branding-2-200

bg-branding-2-300

bg-branding-2-400

bg-branding-2-500

bg-branding-2-600

bg-branding-2-700

bg-branding-2-800

bg-branding-2-900

txt-gray-50

txt-gray-100

txt-gray-200

txt-gray-300

txt-gray-400

txt-gray-500

txt-gray-600

txt-gray-700

txt-gray-800

txt-gray-900

border-gray-50

border-gray-100

border-gray-200

border-gray-300

border-gray-400

border-gray-500

border-gray-600

border-gray-700

border-gray-800

border-gray-900

bg-gray-50

bg-gray-100

bg-gray-200

bg-gray-300

bg-gray-400

bg-gray-500

bg-gray-600

bg-gray-700

bg-gray-800

bg-gray-900

Contextuals

Default contextuals

border border-success

border border-warning

border border-danger

bg-success text-white

bg-warning text-white

bg-danger text-white

Custom contextuals

txt-success-50

txt-success-100

txt-success-200

txt-success-300

txt-success-400

txt-success-500

txt-success-600

txt-success-700

txt-success-800

txt-success-900

border-success-50

border-success-100

border-success-200

border-success-300

border-success-400

border-success-500

border-success-600

border-success-700

border-success-800

border-success-900

bg-success-50

bg-success-100

bg-success-200

bg-success-300

bg-success-400

bg-success-500

bg-success-600

bg-success-700

bg-success-800

bg-success-900

txt-warning-50

txt-warning-100

txt-warning-200

txt-warning-300

txt-warning-400

txt-warning-500

txt-warning-600

txt-warning-700

txt-warning-800

txt-warning-900

border-warning-50

border-warning-100

border-warning-200

border-warning-300

border-warning-400

border-warning-500

border-warning-600

border-warning-700

border-warning-800

border-warning-900

bg-warning-50

bg-warning-100

bg-warning-200

bg-warning-300

bg-warning-400

bg-warning-500

bg-warning-600

bg-warning-700

bg-warning-800

bg-warning-900

txt-danger-50

txt-danger-100

txt-danger-200

txt-danger-300

txt-danger-400

txt-danger-500

txt-danger-600

txt-danger-700

txt-danger-800

txt-danger-900

border-danger-50

border-danger-100

border-danger-200

border-danger-300

border-danger-400

border-danger-500

border-danger-600

border-danger-700

border-danger-800

border-danger-900

bg-danger-50

bg-danger-100

bg-danger-200

bg-danger-300

bg-danger-400

bg-danger-500

bg-danger-600

bg-danger-700

bg-danger-800

bg-danger-900

txt-info-50

txt-info-100

txt-info-200

txt-info-300

txt-info-400

txt-info-500

txt-info-600

txt-info-700

txt-info-800

txt-info-900

border-info-50

border-info-100

border-info-200

border-info-300

border-info-400

border-info-500

border-info-600

border-info-700

border-info-800

border-info-900

bg-info-50

bg-info-100

bg-info-200

bg-info-300

bg-info-400

bg-info-500

bg-info-600

bg-info-700

bg-info-800

bg-info-900

Dataviz colors

Datavizualisation: diverging spectral

For interval scale

bg-dataviz-div-spectral-1

bg-dataviz-div-spectral-2

bg-dataviz-div-spectral-3

bg-dataviz-div-spectral-4

bg-dataviz-div-spectral-5

bg-dataviz-div-spectral-6

bg-dataviz-div-spectral-7

bg-dataviz-div-spectral-8

bg-dataviz-div-spectral-9

bg-dataviz-div-spectral-10

bg-dataviz-div-spectral-11

bg-dataviz-div-spectral-12

bg-dataviz-div-spectral-13

bg-dataviz-div-spectral-14

bg-dataviz-div-spectral-15

Datavizualisation: diverging signal

Negative-positive

bg-dataviz-div-signal-1

bg-dataviz-div-signal-2

bg-dataviz-div-signal-3

bg-dataviz-div-signal-4

bg-dataviz-div-signal-5

bg-dataviz-div-signal-6

bg-dataviz-div-signal-7

bg-dataviz-div-signal-8

bg-dataviz-div-signal-9

bg-dataviz-div-signal-10

bg-dataviz-div-signal-11

bg-dataviz-div-signal-12

bg-dataviz-div-signal-13

bg-dataviz-div-signal-14

bg-dataviz-div-signal-15

Datavizualisation: diverging branding

No temperature (value) associations

bg-dataviz-div-branding-1

bg-dataviz-div-branding-2

bg-dataviz-div-branding-3

bg-dataviz-div-branding-4

bg-dataviz-div-branding-5

bg-dataviz-div-branding-6

bg-dataviz-div-branding-7

bg-dataviz-div-branding-8

bg-dataviz-div-branding-9

bg-dataviz-div-branding-10

bg-dataviz-div-branding-11

bg-dataviz-div-branding-12

bg-dataviz-div-branding-13

bg-dataviz-div-branding-14

bg-dataviz-div-branding-15

Datavizualisation: diverging heat

Temperature. Hot – cold. Negative – positive

bg-dataviz-div-heat-1

bg-dataviz-div-heat-2

bg-dataviz-div-heat-3

bg-dataviz-div-heat-4

bg-dataviz-div-heat-5

bg-dataviz-div-heat-6

bg-dataviz-div-heat-7

bg-dataviz-div-heat-8

bg-dataviz-div-heat-9

bg-dataviz-div-heat-10

bg-dataviz-div-heat-11

bg-dataviz-div-heat-12

bg-dataviz-div-heat-13

bg-dataviz-div-heat-14

bg-dataviz-div-heat-15

Datavizualisation: categorical

Categorical data: no value encoding

bg-dataviz-categorical-1

bg-dataviz-categorical-2

bg-dataviz-categorical-3

bg-dataviz-categorical-4

bg-dataviz-categorical-5

bg-dataviz-categorical-6

bg-dataviz-categorical-7

bg-dataviz-categorical-8

bg-dataviz-categorical-9

bg-dataviz-categorical-10

bg-dataviz-categorical-11

bg-dataviz-categorical-12

Radius

I'm rounded

I'm rounded-circle

Show code


                    <img class="rounded" src="https://picsum.photos/100/100"/>
                    <img class="rounded-circle" src="https://picsum.photos/100/100"/>

Shadows

I'm a small shadow shadow-sm

I'm normal shadow shadow

I'm a large shadow shadow-lg

Show code


                    <p class="shadow-sm p-3 m-3">I'm a small shadow <code>shadow-sm</code></p>
                    <p class="shadow p-3 m-3">I'm normal shadow <code>shadow</code></p>
                    <p class="shadow-lg p-3 m-3">I'm a large shadow <code>shadow-lg</code></p>

v1.0.811-rev-07dbbad