Background Colors

If you want to change the background of an element, you can do so by using one of the .bg-* classes provided by Concise. These classes can be used on any element or with any class provided by Concise (eg: buttons, tables, etc).

You can change the $bg-colors map in the /helpers/_variables.scss file to adjust any of the colors, or add new ones.

Preview

Black background

Light gray background

Gray background

Light green background

Green background

Light red background

Red background

Light yellow background

Yellow background

Light blue background

Blue background

Code

<div class="bg-white">...</div>
<div class="bg-black">...</div>
<div class="bg-light-gray">...</div>
<div class="bg-gray">...</div>
<div class="bg-light-green">...</div>
<div class="bg-green">...</div>
<div class="bg-light-red">...</div>
<div class="bg-red">...</div>
<div class="bg-light-yellow">...</div>
<div class="bg-yellow">...</div>
<div class="bg-light-blue">...</div>
<div class="bg-blue">...</div>

Documentation

Learn how to use all of great features that Concise provides.

Background Colors