ComboStrap Styling - Color


Every ComboStrap UI component can be colorized with one of the following color attributes

This page describes which color value, they can take.


<card color="black" background-color="teal" border-color="blue" align="center" width="200px">
A teal [[docs:block:card|card]] with a black text and a blue border
  • Output:

A teal card with a black text and a blue border


ComboStrap supports the following color value:

Color Generator

Generating or choosing attractive color is not easy. The color generator page may help you in this task.


ComboStrap follows the Bootstrap color naming and you may then use the following color names.

The default Bootstrap colors are:

You can also use a CSS Color name.


rbg (or red blue green) is the standard web value that is composed of an hexadecimal value.

Example with the text component

<text color="#6c757d" width="fit" align="center">
Text color with a hexadecimal value of ''#6c757d''
  • Output

Text color with a hexadecimal value of #6c757d


The reset color applied on a link will take the color of the text and we underline it to make it visible.

  • Input
<text color="#6c757d">
Colored text with a [[?color=reset&underline|reset link]]
  • Output

Colored text with a reset link


Bootstrap Color Set

Just for your information, Bootstrap does not assign the same color set by name for a component.

For instance, you got this colors for a Primary button

.btn-primary {
    color: #fff;
    background-color: #075ebb;
    border-color: #075ebb;

and this one for a primary note

.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;

Primary Secondary

The image below shows as example a list of primary/secondary colors that are the basic block for a theme.

This list of colors is used by Chrome to choose your theme for your profile (chrome://settings/manageProfile)

Powered by ComboStrap