Background Colors

Notes on Implementation

To generate background variant styles, we use the mixin, accessible-bg-variant, rather than Bootstrap’s bg-variant. The accessible-bg-variant mixin will set the text, heading, and link color to either white or black (depending on the color contrast ratio of the text with the selected background color). A color contrast ratio of at least 4.5:1 is required for normal-sized text to ensure accessibility. A white background can be implemented with the class bg-white, which uses the default (blue) colors for headings and links (i.e., the class bg-white only changes the background color to white).

Background Color class="bg-yale"

This is a background style based on the yale theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Background Color class="bg-primary"

This is a background style based on the primary theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Background Color class="bg-secondary"

This is a background style based on the secondary theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Background Color class="bg-success"

This is a background style based on the success theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Background Color class="bg-info"

This is a background style based on the info theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Background Color class="bg-warning"

This is a background style based on the warning theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Background Color class="bg-danger"

This is a background style based on the danger theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Background Color class="bg-light"

This is a background style based on the light theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Background Color class="bg-dark"

This is a background style based on the dark theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.