Palette classes
Info color palette includes 1 main info
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 - info, info, info, info, info - are still available and correspond to main colors, so you can use both.bg-info
and .[btn|btn-flat|btn-outline|table|alert]-info
as main
color classes. For light semi-transparent info background color, use our background opacity
classes, (e.g. .bg-info.bg-opacity-25
) and optionally .text-info
class.
Class | Description |
---|---|
.bg-info |
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-info.bg-opacity-25 . Available values are 10, 20, 25,
50, 75, 100. |
.button-info |
Class for solid buttons. Includes hover, active and open states |
.button-outline-info |
Class for outline buttons. Includes hover, active and open states |
.button-flat-info |
Class for flat buttons. Includes hover, active and open states |
.alert-info |
Classes for light alerts. You can use .bg-info in combination
with .text-white for solid background color |
.table-info |
Classes for light table rows or cells. You can use .bg-info in
combination with .text-white for solid background color |
.list-group-item-info |
Classes for inline and clickable list group items. Include hover, and active states |
.border-info |
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-info |
Classes for top border color. Use this class if you need to
highlight top border only |
.border-bottom-info |
Classes for bottom border color. Use this class if you need to
highlight bottom border only |
.border-start-info |
Classes for left border color. Use this class if you need to
highlight left border only |
.border-end-info |
Classes for right border color. Use this class if you need to
highlight right border only |
.text-info |
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 directionsForm components
Inputs, selects, input groups etc.Input field text
Change text color in an input field with .text-info
class.
Use .text-opacity-[value]
to change text opacity
Input border color
Change border color in an input field with .border-info
class. Use .border-opacity-[value]
to change border opacity
Input with feedback
Change icon color in an input field with .text-info
class.
Use .text-opacity-[value]
to change icon opacity
Input group text addon - text
Change text addon color of input group with .text-info
class. Opacity classes are also supported
Input group addon - background
Change text addon background color of input group with
.bg-info
class. Opacity classes are also supported
Input group addon - border
Change text addon border color of input group with
.border-info
class. Opacity classes are also supported
Input group icon addon - text
Change icon addon color of input group with .text-info
class. Supports optional opacity classes
Input group icon addon - background
Change icon addon background color of input group with
.bg-info
class. Supports optional opacity classes
Input group icon addon - border
Change icon addon border color of input group with
.border-info
class. Supports optional opacity classes
Input group button - solid background
Use a button or a link element with .btn-info
class. All
button elements and styles are also supported
Input group button - solid border
Add .border-info
class to .form-control
element to give an input field the same border color as button
Input group button - outline
To show outline info button in an input group, use a button or a link
element with .btn-outline-info
class
Input group button - outline border
Input group with info input border color and outline button. Use
.border-info
in .form-control
element
Select2 single - text
Use .text-info
class in
data-container-css-class
attribute to show info text color in select2
select
Select2 single - border
Use .border-info
class in
data-container-css-class
attribute to show info border color in select2
select
Multiselect - text
Use .btn.text-info
classes in
data-button-class
attribute to show info text color in multiselect
Multiselect - border
Use .btn.border-info
classes in
data-button-class
attribute to show info border color in multiselect
Custom select - text
Use .text-info
class in .form-select
element
to change default text color in select element to info
Custom select - border
Use .border-info
class in .form-select
element
to change default border color in select element to info
Custom file input - text
Use .text-info
class in file input with
.form-control
class to change default text color to info
Custom file input - border
Use .border-info
class in file input with
.form-control
class to change default border color to info
Tabs component color
Solid tabs nav and content colorTabs navigation color
Add custom background color to the tab navigation with
.bg-info
palette classes. Make sure tags navigation container also
has .nav-tabs-solid
and .nav-tabs-solid-dark
classes
Solid color tabs
Add custom background color to the tab navigation and content area
with .bg-info
palette classes. Also add
.nav-tabs-solid
and .nav-tabs-solid-dark
classes to
the nav container
Text options
Color options for text, link, badge and badge pillsText
Use .text-info
class in any inline or block element to
change text color. Edit --info
var to change it globally
Flat badge
Use .bg-info
and .bg-opacity-20
along with
.text-info
classes to show semi-transparent badge
Link
Use .link-info
class in anchor tag to apply a info color
scheme to links. This class also adds hover state
Badge pill
Add .rounded-pill
utility class to
.badge.bg-info
element to show a regular badge with fully rounded
corners
Badge
Add .bg-info
class to the base .badge
element.
Badge colors are controlled by color utility classes
Outline badge
To show a badge in outline style, use .border.border-info
along with .text-info
set of classes
Progress bars
All colors, all sizes, all optionsBasic 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 info
background color
Animated bar color
Use .progress-bar-animated
in info progress bar to animate
the stripes right to left via CSS3 animations
Table color options
Header, footer, rows, columns, cells etc.Header and 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
# | First Name | Last Name | Username |
---|---|---|---|
1 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
# | First Name | Last Name | Username |
Table columns
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
.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 colorsSolid button
Add .btn-info
to the button or anchor element with the base
.btn
class to show a button in a solid style
Labeled basic button
Add .btn-info
to labeled solid button and control
background color of button label with bg color utility classes
Outline button
Add .btn-outline-info
to the button or anchor element to
show a info button in an outline style
Labeled outline button
Add .btn-outline-info
to labeled outline button and control
bg color of label with utility classes
Flat button
Add .btn-flat-info
to the button or anchor element to show
a info button in a flat style
Labeled flat button
Add .btn-flat-info
to labeled flat button and control
background color of button label with bg color utility classes
Card colors
Card, card border and heading colorsInfo card
.bg-info
and .text-white
utility classes
added to the card header
Info bordered card
.bg-info.text-white
and
.border-info
utility classes
Info solid card
.bg-info
and .text-white
classes
added to the card container
Notifications & dialogs
Notifications, modals, popovers, tooltipsTooltip color
Change tooltip style to info color scheme in template
configuration option and .tooltip-custom
class
Popover background
Change popover style to info color scheme in template
configuration option and .popover-custom
class
Noty notification
Add bg-info text-white
to theme
option in Noty
config to show notification in info color scheme
Modal dialog header
Change default light style of modal header to custom by adding
.bg-info.text-white
to modal header
Modal background
Add .bg-info
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 colorDropdown border color
Use or border utility classes in .dropdown-menu
container
to change default dropdown border color
Dropdown background color
Add .bg-info
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