Palette classes

Danger color palette includes 1 main danger color. Majority of components and layout parts are coded with maximum flexibility and support different color options that can be changed on-the-fly just by adding or replacing proper color class. Also works perfectly in combination with other helpers, which makes Limitless very flexible and configurable.

SASS files include 10 different shades and tints of each color, but class names include only 1 of them. You can easy add new shades or tints of any color if you need to just by adding color variable to theme color map and re-compile your SASS files. That will generate all necessary color classes for all components and automatically add all states to them.

Please note: default Bootstrap contextual classes - danger, danger, success, warning, info - are still available and correspond to main colors, so you can use both .bg-danger and .[btn|btn-flat|btn-outline|table|alert]-danger as main color classes. For light semi-transparent danger background color, use our background opacity classes, (e.g. .bg-danger.bg-opacity-25) and optionally .text-danger class.
Class Description
.bg-danger Class for background color. You can control the transparency with our opacity utility classes and use them in combination with background color, e.g. .bg-danger.bg-opacity-25. Available values are 10, 20, 25, 50, 75, 100.
.button-danger Class for solid buttons. Includes hover, active and open states
.button-outline-danger Class for outline buttons. Includes hover, active and open states
.button-flat-danger Class for flat buttons. Includes hover, active and open states
.alert-danger Classes for light alerts. You can use .bg-danger in combination with .text-white for solid background color
.table-danger Classes for light table rows or cells. You can use .bg-danger in combination with .text-white for solid background color
.list-group-item-danger Classes for inline and clickable list group items. Include hover, and active states
.border-danger Classes for border color. Useful when only border needs to have different colors - validation, highlights, custom buttons etc. Can be used with form controls, selects, cards, buttons and any other block element. Control border opacity with .border-opacity-[10|20|25|50|75|100] classes
.border-top-danger Classes for top border color. Use this class if you need to highlight top border only
.border-bottom-danger Classes for bottom border color. Use this class if you need to highlight bottom border only
.border-start-danger Classes for left border color. Use this class if you need to highlight left border only
.border-end-danger Classes for right border color. Use this class if you need to highlight right border only
.text-danger Classes for text color. These colors can be used with: text, links, icons, lists etc. Base text color doesn't require suffix. Control text color opacity with .text-opacity-[10|20|25|50|75|100] utility classes
Alert options
Bordered, styled, solid in both directions
Very basic alert in danger color palette
Here you can see how danger palette can be used with different components. By the way, this alert uses it as well
Alert that has solid background color and white text
Alert that has solid background color, white text and an icon
Form components
Inputs, selects, input groups etc.
Input field text

Change text color in an input field with .text-danger class. Use .text-opacity-[value] to change text opacity

Input border color

Change border color in an input field with .border-danger class. Use .border-opacity-[value] to change border opacity

Input with feedback

Change icon color in an input field with .text-danger class. Use .text-opacity-[value] to change icon opacity

Input group text addon - text

Change text addon color of input group with .text-danger class. Opacity classes are also supported

0.00
Input group addon - background

Change text addon background color of input group with .bg-danger class. Opacity classes are also supported

0.00
Input group addon - border

Change text addon border color of input group with .border-danger class. Opacity classes are also supported

0.00
Input group icon addon - text

Change icon addon color of input group with .text-danger class. Supports optional opacity classes

Input group icon addon - background

Change icon addon background color of input group with .bg-danger class. Supports optional opacity classes

Input group icon addon - border

Change icon addon border color of input group with .border-danger class. Supports optional opacity classes

Input group button - solid background

Use a button or a link element with .btn-danger class. All button elements and styles are also supported

Input group button - solid border

Add .border-danger class to .form-control element to give an input field the same border color as button

Input group button - outline

To show outline danger button in an input group, use a button or a link element with .btn-outline-danger class

Input group button - outline border

Input group with danger input border color and outline button. Use .border-danger in .form-control element

Select2 single - text

Use .text-danger class in data-container-css-class attribute to show danger text color in select2 select

Select2 single - border

Use .border-danger class in data-container-css-class attribute to show danger border color in select2 select

Multiselect - text

Use .btn.text-danger classes in data-button-class attribute to show danger text color in multiselect

Multiselect - border

Use .btn.border-danger classes in data-button-class attribute to show danger border color in multiselect

Custom select - text

Use .text-danger class in .form-select element to change default text color in select element to danger

Custom select - border

Use .border-danger class in .form-select element to change default border color in select element to danger

Custom file input - text

Use .text-danger class in file input with .form-control class to change default text color to danger

Custom file input - border

Use .border-danger class in file input with .form-control class to change default border color to danger

Tabs component color
Solid tabs nav and content color
Tabs navigation color

Add custom background color to the tab navigation with .bg-danger palette classes. Make sure tags navigation container also has .nav-tabs-solid and .nav-tabs-solid-dark classes

This is some placeholder content the first tab's associated content
This is some placeholder content the second tab's associated content
This is some placeholder content the third tab's associated content
This is some placeholder content the fourth tab's associated content
Solid color tabs

Add custom background color to the tab navigation and content area with .bg-danger palette classes. Also add .nav-tabs-solid and .nav-tabs-solid-dark classes to the nav container

This is some placeholder content the first tab's associated content
This is some placeholder content the second tab's associated content
This is some placeholder content the third tab's associated content
This is some placeholder content the fourth tab's associated content
Text options
Color options for text, link, badge and badge pills
Text

Use .text-danger class in any inline or block element to change text color. Edit --danger var to change it globally

Danger text
Flat badge

Use .bg-danger and .bg-opacity-20 along with .text-danger classes to show semi-transparent badge

Flat badge
Link

Use .link-danger class in anchor tag to apply a danger color scheme to links. This class also adds hover state

Badge pill

Add .rounded-pill utility class to .badge.bg-danger element to show a regular badge with fully rounded corners

390
Badge

Add .bg-danger class to the base .badge element. Badge colors are controlled by color utility classes

Badge element
Outline badge

To show a badge in outline style, use .border.border-danger along with .text-danger set of classes

Outline badge
Progress bars
All colors, all sizes, all options
Basic bar color

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes

Striped bar color

Add .progress-bar-striped to any progress bar to apply a stripe over the bar’s danger background color

Animated bar color

Use .progress-bar-animated in danger progress bar to animate the stripes right to left via CSS3 animations

Table color options
Header, footer, rows, columns, cells etc.
Header and footer
Easily change background color of table header and table footer by adding color class to the table header or footer tr element. Adjust text color with our color utility classes
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
# First Name Last Name Username
Table rows
All table layouts support different row color options - semi-transparent and solid fill. For semi-transparent option use a combination of background color and background opacity classes
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
# First Name Last Name Username
Table columns
Besides table rows, you can also highlight table columns in the same way as rows, but add color classes to td elements instead of tr. You can also change border color if necessary
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
# First Name Last Name Username
Solid table
Sometimes it may be very handy to change the background color of the whole table, you just need to add .bg-* classes to the table element and adjust text color via our text color utility classes
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
# First Name Last Name Username
Button colors
Button text, border and background colors
Solid button

Add .btn-danger to the button or anchor element with the base .btn class to show a button in a solid style

Labeled basic button

Add .btn-danger to labeled solid button and control background color of button label with bg color utility classes

Outline button

Add .btn-outline-danger to the button or anchor element to show a danger button in an outline style

Labeled outline button

Add .btn-outline-danger to labeled outline button and control bg color of label with utility classes

Flat button

Add .btn-flat-danger to the button or anchor element to show a danger button in a flat style

Labeled flat button

Add .btn-flat-danger to labeled flat button and control background color of button label with bg color utility classes

Card colors
Card, card border and heading colors
Danger card
Danger card using .bg-danger and .text-white utility classes added to the card header
Danger bordered card
Bordered danger card using .bg-danger.text-white and .border-danger utility classes
Danger solid card
Solid danger card using .bg-danger and .text-white classes added to the card container
Notifications & dialogs
Notifications, modals, popovers, tooltips
Tooltip color

Change tooltip style to danger color scheme in template configuration option and .tooltip-custom class

Popover background

Change popover style to danger color scheme in template configuration option and .popover-custom class

Noty notification

Add bg-danger text-white to theme option in Noty config to show notification in danger color scheme

Modal dialog header

Change default light style of modal header to custom by adding .bg-danger.text-white to modal header

Modal background

Add .bg-danger and .text-white classes to .modal-content container to apply custom background to modal

Modal dialog footer

The same as modal footer, but instead of .modal-header add color classes to .modal-footer container

Toast header

Use our color classes in .toast-header container along with .text-white and .btn-close-white classes

Toast border

Use color utility classes .border-[color] in .toast and .toast-header containers to change toast border color

Toast background

Use .bg-[color] and .text-white in .toast container to change the default toast color scheme

Dropdown menu colors
Dropdown and menu elements color
Dropdown border color

Use or border utility classes in .dropdown-menu container to change default dropdown border color

Dropdown background color

Add .bg-danger and .dropdown-menu-dark to dropdown container to show dropdown menu in a custom color scheme

Adapted menu components

All dropdown elements are adapted for dropdowns in custom style. Check out dropdowns page for more info

Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless