Helperclasses

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


                    <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


                    <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.841-rev-f8d5cfe+f8d5cfe75d5a52f58b13d21aa1ee045f0808d96d