To skin Bootstrap v4+ Buttons.
<dl>
<dt>Types</dt>
<dd>
<button
type="button"
class="btn btn-primary"
>
Primary
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-secondary"
>
Secondary
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-info"
>
Info
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-success"
>
Success
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-warning"
>
Warning
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-danger"
>
Danger
</button>
</dd>
</dl>
<dl>
<dt>Brightness</dt>
<dd>
<button
type="button"
class="btn btn-dark"
>
Dark
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-light"
>
Light
</button>
</dd>
</dl>
<dl>
<dt>Sizes</dt>
<dd>
<button
type="button"
class="btn btn-primary btn-sm"
>
Small
</button>
</dd>
</dl>
<dl>
<dt>States</dt>
<dd>
<button
type="button"
class="btn btn-primary active"
>
Primary Active
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-secondary active"
>
Secondary Active
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-info active"
>
Other Active
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-primary"
disabled
>
Primary Disabled
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-secondary"
disabled
>
Secondary Disabled
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-info"
disabled
>
Other Disabled
</button>
</dd>
</dl>
<dl>
<dt>Variants</dt>
<dd>
<a
href="#"
class="btn btn-link"
>
Link
</a>
</dd>
</dl>
<dl>
<dt>With Icons</dt>
<dd>
<button
type="button"
class="btn btn-primary"
>
<i class="icon icon-user"></i>
Before
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-success"
>
After
<i class="icon icon-user"></i>
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-danger"
>
<i class="icon icon-user"></i>
Before & After
<i class="icon icon-user"></i>
</button>
</dd>
<dd>
<button
type="button"
class="btn btn-info btn-sm"
>
<i class="icon icon-user"></i>
Small
</button>
</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;
}
{
"shouldSkipPattern": true,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"bootstrap5Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap5.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/components",
"shouldLoadBootstrap": true,
"supportStyles": [
"../../assets/components/cortal-icon.css"
],
"groups": [
{
"title": "Types",
"types": [
{
"type": "primary",
"text": "Primary"
},
{
"type": "secondary",
"text": "Secondary"
},
{
"type": "info",
"text": "Info"
},
{
"type": "success",
"text": "Success"
},
{
"type": "warning",
"text": "Warning"
},
{
"type": "danger",
"text": "Danger"
}
]
},
{
"title": "Brightness",
"types": [
{
"type": "dark",
"text": "Dark"
},
{
"type": "light",
"text": "Light"
}
]
},
{
"title": "Sizes",
"types": [
{
"type": "primary",
"size": "sm",
"text": "Small"
}
]
},
{
"title": "States",
"types": [
{
"type": "primary",
"active": true,
"text": "Primary Active"
},
{
"type": "secondary",
"active": true,
"text": "Secondary Active"
},
{
"type": "info",
"active": true,
"text": "Other Active"
},
{
"type": "primary",
"disabled": true,
"text": "Primary Disabled"
},
{
"type": "secondary",
"disabled": true,
"text": "Secondary Disabled"
},
{
"type": "info",
"disabled": true,
"text": "Other Disabled"
}
]
},
{
"title": "Variants",
"types": [
{
"asLink": true,
"href": "#",
"text": "Link"
}
]
},
{
"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"
}
]
}
]
}