Skip to main content

Color

These utilities are generated by Bootstrap when we override Bootstrap’s color variables. Further down the page are examples for text color. But they work for buttons btn-{color}, backgrounds bg-{color}, and border colors border-{color}. Where {color} can be one of the following:

Primary Palette

wvu-blue

wvu-gold

Neutral Palette

wvu-neutral--black

wvu-neutral--dark-gray

wvu-neutral--light-gray

wvu-neutral--dark-brown

wvu-neutral--brown

wvu-neutral--light-brown

Accent Palette

wvu-accent--dark-blue

wvu-accent--blue

wvu-accent--light-blue

wvu-accent--brown

wvu-accent--mustard

wvu-accent--orange

wvu-accent--dark-green

wvu-accent--green

wvu-accent--light-green

wvu-accent--red

wvu-accent--burnt-orange

wvu-accent--yellow

Make sure when using these classes to keep in mind our Accessibility Guidelines for color contrast.

Background Color Examples

bg-wvu-blue text-white
bg-wvu-gold
bg-wvu-neutral--black text-white
bg-wvu-neutral--dark-gray text-white
bg-wvu-neutral--light-gray
bg-wvu-neutral--dark-brown text-white
bg-wvu-neutral--brown text-white
bg-wvu-neutral--light-brown
bg-wvu-accent--dark-blue text-white
bg-wvu-accent--blue text-white
bg-wvu-accent--light-blue
bg-wvu-accent--brown text-white
bg-wvu-accent--mustard text-white
bg-wvu-accent--orange
bg-wvu-accent--dark-green text-white
bg-wvu-accent--green text-white
bg-wvu-accent--light-green
bg-wvu-accent--red text-white
bg-wvu-accent--burnt-orange text-white
bg-wvu-accent--yellow
<div class="text-wvu-blue text-white">bg-wvu-blue text-white</div>
<div class="bg-wvu-gold bg-dark">bg-wvu-gold</div>
<div class="bg-wvu-neutral--black text-white">bg-wvu-neutral--black text-white</div>
<div class="bg-wvu-neutral--dark-gray text-white">bg-wvu-neutral--dark-gray text-white</div>
<div class="bg-wvu-neutral--light-gray bg-dark">bg-wvu-neutral--light-gray</div>
<div class="bg-wvu-neutral--dark-brown text-white">bg-wvu-neutral--dark-brown text-white</div>
<div class="bg-wvu-neutral--brown text-white">bg-wvu-neutral--brown text-white</div>
<div class="bg-wvu-neutral--light-brown bg-dark">bg-wvu-neutral--light-brown</div>
<div class="bg-wvu-accent--dark-blue text-white">bg-wvu-accent--dark-blue text-white</div>
<div class="bg-wvu-accent--blue text-white">bg-wvu-accent--blue text-white</div>
<div class="bg-wvu-accent--light-blue bg-dark">bg-wvu-accent--light-blue</div>
<div class="bg-wvu-accent--brown text-white">bg-wvu-accent--brown text-white</div>
<div class="bg-wvu-accent--mustard text-white">bg-wvu-accent--mustard text-white</div>
<div class="bg-wvu-accent--orange bg-dark text-white">bg-wvu-accent--orange text-white</div>
<div class="bg-wvu-accent--dark-green text-white">bg-wvu-accent--dark-green text-white</div>
<div class="bg-wvu-accent--green">bg-wvu-accent--green</div>
<div class="bg-wvu-accent--light-green bg-dark">bg-wvu-accent--light-green</div>
<div class="bg-wvu-accent--red text-white">bg-wvu-accent--red text-white</div>
<div class="bg-wvu-accent--burnt-orange text-white">bg-wvu-accent--burnt-orange text-white</div>
<div class="bg-wvu-accent--yellow bg-dark">bg-wvu-accent--yellow</div>

Text Color Examples

text-wvu-blue
text-wvu-gold
text-wvu-neutral--black
text-wvu-neutral--dark-gray
text-wvu-neutral--light-gray
text-wvu-neutral--dark-brown
text-wvu-neutral--brown
text-wvu-neutral--light-brown
text-wvu-accent--dark-blue
text-wvu-accent--blue
text-wvu-accent--light-blue
text-wvu-accent--brown
text-wvu-accent--mustard
text-wvu-accent--orange
text-wvu-accent--dark-green
text-wvu-accent--green
text-wvu-accent--light-green
text-wvu-accent--red
text-wvu-accent--burnt-orange
text-wvu-accent--yellow
<div class="text-wvu-blue">text-wvu-blue</div>
<div class="text-wvu-gold bg-dark">text-wvu-gold</div>
<div class="text-wvu-neutral--black">text-wvu-neutral--black</div>
<div class="text-wvu-neutral--dark-gray">text-wvu-neutral--dark-gray</div>
<div class="text-wvu-neutral--light-gray bg-dark">text-wvu-neutral--light-gray</div>
<div class="text-wvu-neutral--dark-brown">text-wvu-neutral--dark-brown</div>
<div class="text-wvu-neutral--brown">text-wvu-neutral--brown</div>
<div class="text-wvu-neutral--light-brown bg-dark">text-wvu-neutral--light-brown</div>
<div class="text-wvu-accent--dark-blue">text-wvu-accent--dark-blue</div>
<div class="text-wvu-accent--blue">text-wvu-accent--blue</div>
<div class="text-wvu-accent--light-blue bg-dark">text-wvu-accent--light-blue</div>
<div class="text-wvu-accent--brown">text-wvu-accent--brown</div>
<div class="text-wvu-accent--mustard">text-wvu-accent--mustard</div>
<div class="text-wvu-accent--orange bg-dark">text-wvu-accent--orange</div>
<div class="text-wvu-accent--dark-green">text-wvu-accent--dark-green</div>
<div class="text-wvu-accent--green">text-wvu-accent--green</div>
<div class="text-wvu-accent--light-green bg-dark">text-wvu-accent--light-green</div>
<div class="text-wvu-accent--red">text-wvu-accent--red</div>
<div class="text-wvu-accent--burnt-orange">text-wvu-accent--burnt-orange</div>
<div class="text-wvu-accent--yellow bg-dark">text-wvu-accent--yellow</div>