#### Colors - Primary Palette

Statistics Invoices Schedule

###### Primary palette colors

Includes 1 main and 5 accent colors
primary-800
Primary 800
#1565C0
primary-700
Primary 700
#1976D2
primary-600
Primary 600
#1E88E5
primary
Primary 500
#2196F3
primary-400
Primary 400
#42A5F5
primary-300
Primary 300
#64B5F6

##### Palette classes

Primary color palette includes 6 colors: 1 main color without suffix and 5 accent colors with 300, 400, 600, 700 and 800 suffixes. Majority of components and layout parts are coded with maximum flexibility and support of 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, that makes Limitless very flexible and configurable.

Please note: default Bootstrap contextual classes - primary, danger, success, warning, info - still available and correspond to main colors, so you can use both `.bg-danger` and `.btn-danger` as main colors, but if you want to use accent colors, use only `.bg-*-*`, BS accent classes have been dropped to avoid unnecessary dublicating.

Class | Description
--- | ---
`.bg-primary` `.bg-primary-*` | Classes for background color. You can choose between 1 primary color using `.bg-primary` class and 5 accent colors using `.bg-primary-*` class in 300, 400, 600, 700, 800 range
`.border-primary` `.border-primary-*` | 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
`.border-top-primary` `.border-top-primary-*` | Classes for `top` border color. Use this class if you need to highlight top border only
`.border-bottom-primary` `.border-bottom-primary-*` | Classes for `bottom` border color. Use this class if you need to highlight bottom border only
`.border-left-primary` `.border-left-primary-*` | Classes for `left` border color. Use this class if you need to highlight left border only
`.border-right-primary` `.border-right-primary-*` | Classes for `right` border color. Use this class if you need to highlight right border only
`.text-primary` `.text-primary-*` | Classes for text color. These colors can be used with: text, links, icons, lists etc. Base text color doesn't require suffix
`.alpha-primary` | Classes for light accent color. Mainly used in alerts with darker text color from the same palette. Available only in 1 class

###### Alert options

Bordered, styled, solid in both directions
Here you can see how primary palette can be used with different components. By the way, this alert uses it as well
And this alert uses primary color palette, but white background color. With utility classes, everything is possible
Morning! We're glad to see you again and wish you a nice day.

###### Form components

Inputs, selects, checkboxes, radios, groups etc.

###### Input field text

Using `.text-primary` classes

###### Input border color

Using `.border-primary` or classes

###### Input background color

Using `.bg-primary` classes

###### Input with feedback

Using `.bg-primary` classes

###### Select background color

Using `.bg-primary` classes

###### File input color

Styled file input button color

###### Input group addon

Using `.bg-primary` classes

###### Addon and button

Combine text addon and button

###### Input group button

Using `.bg-primary` classes

###### Checkbox colors

Using border and text color classes

Checked
Unchecked

###### Radio classes

Using border color classes

Selected
Unselected

###### Switchery colors

Using native plugin options

Unchecked Checked

###### Select2 selects

Single and multiple select colors

###### Select2 single

Custom single select background

###### Menu colors

Custom menu background

###### Select multiple

Custom multiple select background

###### Other selects

Select2, Uniform and Multiselect

###### Result and menu colors

Combination of CSS class options

###### Uniform select

Using plugin's `selectClass` option

###### Multiselect color

Using plugin's `buttonClass` option

###### Tabs component color

Solid tabs nav and content color

###### Tabs navigation color

###### Solid color tabs

Add `custom` background color to the tabs navigation and content with `.bg-primary` palette classes
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet

###### Text options

Text, link, badges, badge pills, icons

###### Text and link color

Using `.text-primary` classes

Primary text and primary link

###### Badge color

Using `.bg-primary` classes

Primary badge

###### Badge pill color

Using `.bg-primary` classes

390

###### Progress bars

All colors, all sizes, all options

###### Basic bar color

Using `.bg-primary` classes

55% Complete

###### Striped bar color

Using `.bg-primary` classes

65% Complete

###### Animated bar color

Using `.bg-primary` classes

75% Complete

###### 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 row

# | 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 - highlight and solid fill

# | 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

# | 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 highlight the whole table, you just need to add `.bg-*` classes to the table

# | 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

###### Basic button

Using `.bg-primary` classes

###### Labeled button

Using `.bg-primary` classes

###### Outline button colors

Using border and text color classes

###### Card colors

Card, card border and heading colors

###### Primary card

Primary card using `.bg-primary` class added to the card header

###### Primary bordered card

Bordered primary card using `.bg-primary` and `.border-primary` classes

###### Primary solid card

Solid primary card using `.bg-primary` class added to the card container

###### Notifications & dialogs

Notifications, modals, popovers, tooltips

###### Tooltip color

Change default tooltip color

###### Popover header

Using `.bg-primary` classes

###### Popover background

Apply custom color to the entire popover

###### Modal dialog header

Using `.bg-primary` classes

###### Modal background

Using `.bg-primary` classes

###### Modal dialog footer

Using `.bg-primary` classes

###### Noty notification

Using `.bg-primary` color classes

###### jGrowl notification

Using plugin's `theme` option

###### PNotify notification

Using plugin's `addclass` option

###### Dropdown menu colors

Dropdown and menu elements color

###### Dropdown border color

Using `.border-primary` color classes

###### Dropdown background color

Using `.bg-primary` color classes

###### Adapted menu components

Badges, badge pills, checkboxes, radios

###### Primary header

###### Text in a modal

Friendship contrasted solicitude insipidity in introduced literature it. He seemed denote except as oppose do spring my. Between any may mention evening age shortly can ability regular. He shortly sixteen of colonel colonel evening cordial to.

###### Another paragraph

Comfort reached gay perhaps chamber his six detract besides add. Moonlight newspaper up he it enjoyment agreeable depending. Timed voice share led his widen noisy young.

Up attempt offered ye civilly so sitting to. She new course get living within elinor joy. She her rapturous suffering concealed.

###### Primary background

###### Text in a modal

Friendship contrasted solicitude insipidity in introduced literature it. He seemed denote except as oppose do spring my. Between any may mention evening age shortly can ability regular. He shortly sixteen of colonel colonel evening cordial to.

###### Another paragraph

Comfort reached gay perhaps chamber his six detract besides add. Moonlight newspaper up he it enjoyment agreeable depending. Timed voice share led his widen noisy young.

Up attempt offered ye civilly so sitting to. She new course get living within elinor joy. She her rapturous suffering concealed.

##### Available options

For a quick usage of different color, you can use one of these optional classes. They work with almost all components and layout parts: sidebar, cards, tables, text, buttons, controls, forms etc. That means you can easily change any background, text and border color of almost any element on-the-fly just by adding one of the classes listed below.

Background color: | `.bg-primary-800`
Border color: | `.border-primary-800`
Border top color: | `.border-top-primary-800`
Border bottom color: | `.border-bottom-primary-800`
Border left color: | `.border-left-primary-800`
Text color: | `.text-primary-800`

##### Available options

For a quick usage of different color, you can use one of these optional classes. They work with almost all components and layout parts: sidebar, cards, tables, text, buttons, controls, forms etc. That means you can easily change any background, text and border color of almost any element on-the-fly just by adding one of the classes listed below.

Background color: | `.bg-primary-700`
Border color: | `.border-primary-700`
Border top color: | `.border-top-primary-700`
Border bottom color: | `.border-bottom-primary-700`
Border left color: | `.border-left-primary-700`
Text color: | `.text-primary-700`

##### Available options

For a quick usage of different color, you can use one of these optional classes. They work with almost all components and layout parts: sidebar, cards, tables, text, buttons, controls, forms etc. That means you can easily change any background, text and border color of almost any element on-the-fly just by adding one of the classes listed below.

Background color: | `.bg-primary-600`
Border color: | `.border-primary-600`
Border top color: | `.border-top-primary-600`
Border bottom color: | `.border-bottom-primary-600`
Border left color: | `.border-left-primary-600`
Text color: | `.text-primary-600`

##### Available options

For a quick usage of different color, you can use one of these optional classes. They work with almost all components and layout parts: sidebar, cards, tables, text, buttons, controls, forms etc. That means you can easily change any background, text and border color of almost any element on-the-fly just by adding one of the classes listed below.

Background color: | `.bg-primary`
Border color: | `.border-primary`
Border top color: | `.border-top-primary`
Border bottom color: | `.border-bottom-primary`
Border left color: | `.border-left-primary`
Text color: | `.text-primary`
Alpha color: | `.alpha-primary`

##### Available options

For a quick usage of different color, you can use one of these optional classes. They work with almost all components and layout parts: sidebar, cards, tables, text, buttons, controls, forms etc. That means you can easily change any background, text and border color of almost any element on-the-fly just by adding one of the classes listed below.

Background color: | `.bg-primary-400`
Border color: | `.border-primary-400`
Border top color: | `.border-top-primary-400`
Border bottom color: | `.border-bottom-primary-400`
Border left color: | `.border-left-primary-400`
Text color: | `.text-primary-400`

##### Available options

For a quick usage of different color, you can use one of these optional classes. They work with almost all components and layout parts: sidebar, cards, tables, text, buttons, controls, forms etc. That means you can easily change any background, text and border color of almost any element on-the-fly just by adding one of the classes listed below.

Background color: | `.bg-primary-300`
Border color: | `.border-primary-300`
Border top color: | `.border-top-primary-300`
Border bottom color: | `.border-bottom-primary-300`
Border left color: | `.border-left-primary-300`
Text color: | `.text-primary-300`