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).

Sample Heading on 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.

Sample Heading on 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.

Sample Heading on 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.

Sample Heading on 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.

Sample Heading on 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.

Sample Heading on 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.

Sample Heading on 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.

Sample Heading on 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.

Sample Heading on 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.