ComboStrap Styling - Color

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

• color: The color of the text
• background-color: The color of the background
• border-color: The color of the border

With a card

<card background-color="teal" color="black" border-color="blue" width="200px">
A teal [[ui:card|card]] with a black text and a blue border
</card>

ComboStrap supports the following color value:

• name
• RGB

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

The default Bootstrap colors are:

If you set a border-color attributes, by default ComboStrap will set the following properties if they are not present.

• a width of 1px
• a style of solid (ie a continue line)
• a radius of 0.25rem (round corner)

This is :

• to avoid the confusion to see nothing appearing on the screen
• and to have a consistent styling with bootstrap.

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;
}

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

• Bootstrap color