CoreUI UI Kit
Documentation and examples for CoreUI Base styles, including colors, typography, and more.
Color pallete
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in scss/_bootstrap-variables.scss file.
Primary Color
| HEX: | #20a8d8 |
| RGB: | #20a8d8 |
| CMYK: | #20a8d8 |
| CSS: | --primary |
Secondary Color
HEX: #a4b7c1Success Color
HEX: #4dbd74Danger Color
HEX: #f86c6bWarning Color
HEX: #ffc107Info Color
HEX: #63c2deLight Color
HEX: #f0f3f5Dark Color
HEX: #29363dGrays
An expansive set of gray variables and a Sass map in scss/_bootstrap-variables.scss for consistent shades of gray across your project.
Gray 100 Color
HEX: #f0f3fGray 200 Color
HEX: #c2cfd6Gray 300 Color
HEX: #a4b7c1Gray 400 Color
HEX: #869facGray 500 Color
HEX: #678898Gray 600 Color
HEX: #536c79Gray 700 Color
HEX: #3e515bGray 800 Color
HEX: #29363dGray 900 Color
HEX: #151b1eTypography
Typography is used to create clear hierarchies, useful organizations, and purposeful alignments that guide users through the product and experience. It is the core structure of any well designed interface.
| Font size: | 2.1875rem |
| Font weight: | 500 |
| Line height: | 1.2 |
| Font size: | 1.75rem |
| Font weight: | 500 |
| Line height: | 1.2 |
| Font size: | 1.53125rem |
| Font weight: | 500 |
| Line height: | 1.2 |
| Font size: | 1.3125rem |
| Font weight: | 500 |
| Line height: | 1.2 |
| Font size: | 1.09375rem |
| Font weight: | 500 |
| Line height: | 1.2 |
| Font size: | 0.875rem |
| Font weight: | 500 |
| Line height: | 1.2 |
Bootstrap alerts
Bootstrap alerts give contextual feedback information for common user operations. Component is delivered with a bunch of usable and adjustable alert messages.
Bootstrap badges
Bootstrap badges are small count and labeling components.
Bootstrap breadcrumb
Bootstrap breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
Bootstrap buttons
Bootstrap buttons component for actions in tables, forms, cards, and more. Bootstrap 4 provides various styles, states, and size. Ready to use and easy to customize.