Color & background

Convey meaning through color with a handful of emphasis utility classes, plus subtle background and border helpers and Material-style gradients.

Text emphasis

.text-primary

.text-primary-emphasis

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

<p class="text-primary-emphasis">Darker, for emphasis.</p>

Subtle backgrounds

Use .bg-{color}-subtle for light, tinted backgrounds.

.bg-primary-subtle .bg-success-subtle .bg-danger-subtle .bg-warning-subtle .bg-info-subtle

<span class="bg-primary-subtle p-3 rounded">.bg-primary-subtle</span>
<span class="bg-success-subtle p-3 rounded">.bg-success-subtle</span>
<span class="bg-danger-subtle p-3 rounded">.bg-danger-subtle</span>
<span class="bg-warning-subtle p-3 rounded">.bg-warning-subtle</span>
<span class="bg-info-subtle p-3 rounded">.bg-info-subtle</span>

Subtle borders

Use .border-{color}-subtle for tinted borders.

.border-primary-subtle

.border-success-subtle

<div class="border border-primary-subtle rounded p-3"><span>.border-primary-subtle</span></div>
<div class="border border-success-subtle rounded p-3"><span>.border-success-subtle</span></div>

Gradients

boodoo ships Material-style gradient helpers: .gradient-primary, .gradient-success, .gradient-info, .gradient-warning, .gradient-danger, .gradient-dark.

.gradient-primary

.gradient-success

.gradient-info

<div class="gradient-primary rounded-2 p-4 text-white demo-box-w10"><span>.gradient-primary</span></div>
<div class="gradient-success rounded-2 p-4 text-white demo-box-w10"><span>.gradient-success</span></div>
<div class="gradient-info rounded-2 p-4 text-white demo-box-w10"><span>.gradient-info</span></div>

Opacity

Control element opacity with .opacity-{0|10|25|50|75|100}.

opacity-100

opacity-75

opacity-50

opacity-25

<div class="bg-primary rounded-2 p-4 text-white opacity-100"><span>opacity-100</span></div>
<div class="bg-primary rounded-2 p-4 text-white opacity-75"><span>opacity-75</span></div>
<div class="bg-primary rounded-2 p-4 text-white opacity-50"><span>opacity-50</span></div>
<div class="bg-primary rounded-2 p-4 text-white opacity-25"><span>opacity-25</span></div>