To skin Bootstrap v4+ Colors.
<dl>
<dt>Types</dt>
<dd>
<p class="text-primary">
Primary
</p>
</dd>
<dd>
<a href="#" class="text-primary">
Primary (Link)
</a>
</dd>
<dd>
<p class="text-secondary">
Secondary
</p>
</dd>
<dd>
<a href="#" class="text-secondary">
Secondary (Link)
</a>
</dd>
<dd>
<p class="text-muted">
Muted
</p>
</dd>
<dd>
<a href="#" class="text-muted">
Muted (Link)
</a>
</dd>
<dd>
<p class="text-success">
Success
</p>
</dd>
<dd>
<p class="text-warning">
Warning
</p>
</dd>
<dd>
<p class="text-danger">
Danger
</p>
</dd>
</dl>
<dl>
<dt>Brightness</dt>
<dd>
<p class="text-dark">
Dark
</p>
</dd>
<dd>
<p class="text-light">
Light
</p>
</dd>
<dd>
<p class="text-black">
Black
</p>
</dd>
<dd>
<p class="text-white">
White
</p>
</dd>
<dd>
<p class="text-black-50">
Black 50%
</p>
</dd>
<dd>
<p class="text-white-50">
White 50%
</p>
</dd>
</dl>
<dl>
<dt>With Icons</dt>
<dd>
<p class="text-primary">
<i class="icon icon-user"></i>
Before
</p>
</dd>
<dd>
<p class="text-success">
After
<i class="icon icon-user"></i>
</p>
</dd>
<dd>
<p class="text-danger">
<i class="icon icon-user"></i>
Before & After
<i class="icon icon-user"></i>
</p>
</dd>
<dd>
<p class="text-info text-sm">
<i class="icon icon-user"></i>
Small
</p>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
#demo {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.text-light,
.text-white,
.text-white-50 {
background-color: var(--global-color-primary--xx-dark) !important;
outline: 0.25em solid var(--global-color-primary--xx-dark);
}
{
"shouldSkipPattern": true,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "bootstrap4/utilities",
"shouldLoadBootstrap": true,
"supportStyles": [
"../../assets/components/cortal-icon.css"
],
"groups": [
{
"title": "Types",
"types": [
{
"type": "primary",
"text": "Primary"
},
{
"type": "primary",
"text": "Primary (Link)",
"asLink": true
},
{
"type": "secondary",
"text": "Secondary"
},
{
"type": "secondary",
"text": "Secondary (Link)",
"asLink": true
},
{
"type": "muted",
"text": "Muted"
},
{
"type": "muted",
"text": "Muted (Link)",
"asLink": true
},
{
"type": "success",
"text": "Success"
},
{
"type": "warning",
"text": "Warning"
},
{
"type": "danger",
"text": "Danger"
}
]
},
{
"title": "Brightness",
"types": [
{
"type": "dark",
"text": "Dark"
},
{
"type": "light",
"text": "Light"
},
{
"type": "black",
"text": "Black"
},
{
"type": "white",
"text": "White"
},
{
"type": "black-50",
"text": "Black 50%"
},
{
"type": "white-50",
"text": "White 50%"
}
]
},
{
"title": "With Icons",
"types": [
{
"type": "primary",
"hasIconBefore": true,
"text": "Before"
},
{
"type": "success",
"hasIconAfter": true,
"text": "After"
},
{
"type": "danger",
"hasIconBefore": true,
"hasIconAfter": true,
"text": "Before & After"
},
{
"type": "info",
"size": "sm",
"hasIconBefore": true,
"text": "Small"
}
]
}
]
}