Components - Navs

Statistics Invoices Schedule
Basic accordion Basic accordion functionality
Accordion Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Accordion with controls Using panel controls, except collapse
Accordion Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Left control icon Using left aligned control icon
Accordion Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Right control icon Using right aligned control icon
Accordion Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Panels styling Using different panel styles
Accordion Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Basic collapsible Basic collapsible functionality
Collapsible Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Collapsible with controls Using all panel controls, except collapse
Collapsible Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Left control icon Using left aligned control icon
Collapsible Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Right control icon Using right aligned control icon
Collapsible Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Panels styling Using different panel styles
Collapsible Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
List group component
Basic usage

List group is a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. The most basic list group is simply an unordered list with list items, and the proper classes. To use linked list group items, add anchor tags instead of list items (that also means a parent <div> instead of an <ul>).

Basic list group

  • List header
  • Sheared coasted so concurrent
  • Goodness instead gull vulture
  • Relentless ouch essentially
  • Devilish yellow unsafe jerkily

Linked items

List header
And hello exotic staunch That and well ecstatically Amid ruefully hello sped
Burst circa less contritely
Contextual classes

Example of list items contextual classes. Depending on the context, you can highlight a specific list group item using available contextual classes: danger, success, warning and info. To use, add .list-group-item-* class to the base .list-group-item class. Also you can add .active class to highlight active list item. Custom colors are also supported.

List item colors

  • Success context
  • Sheared coasted so concurrent
  • Info context
  • Relentless ouch essentially
  • Warning context
  • Negatively far essential much
  • Danger context
  • Into darn intrepid belated

Linked list item colors

Success context
Sheared coasted so concurrent
Info context
Relentless ouch essentially
Warning context
Negatively far essential much
Danger context
Into darn intrepid belated
List group elements

Examples of group list elements. You can add badges, labels and icons to any list group item. Depending on a placement of the component, it will appear before, after or will be positioned on the right of the list item. To use right positioned element, simply add .pull-right helper class to it. Dropdown menus are also supported.

Icons in list group

  • Group header
  • And hello exotic staunch
  • That and well ecstatically
  • Sheared coasted so concurrent
  • Into darn intrepid belated

Icons in list group

  • 93 And hello exotic staunch
  • 73 That and well ecstatically
  • Sheared coasted so concurrent New
  • Into darn intrepid belated Resolved

Icons in linked list group

Group header
And hello exotic staunch That and well ecstatically
Sheared coasted so concurrent Into darn intrepid belated

Badges in linked list group

93 And hello exotic staunch 73 That and well ecstatically
Sheared coasted so concurrent New Into darn intrepid belated Resolved
Custom content

Simple example of a custom content in the list group component. You can add nearly any HTML markup, add images, custom elements and colors to the list group item. Example below demonstrates a simple content with title and text. For proper styling, heading must contain .list-group-item-heading class and content must have .list-group-item-text class.

Custom content

  • Leapt so heedlessly

    Haltered disconsolate cocky grizzly rode said oh outgrew patiently wild empirically near this and a alas some more

  • Black where yikes

    This and shivered wow boa yikes additional much one lavish gasped outside amongst jeez scurrilously and octopus

  • Gecko preparatory

    Insincere dipped flauntingly yikes therefore or more clenched but beneath krill before dear however

  • Parrot slid wow

    Gosh plankton thus egotistically alas satisfactorily flatly towards and far therefore oh drove convenient less

Custom linked content

Leapt so heedlessly

Haltered disconsolate cocky grizzly rode said oh outgrew patiently wild empirically near this and a alas some more
Black where yikes

This and shivered wow boa yikes additional much one lavish gasped outside amongst jeez scurrilously and octopus
Gecko preparatory

Insincere dipped flauntingly yikes therefore or more clenched but beneath krill before dear however
Parrot slid wow

Gosh plankton thus egotistically alas satisfactorily flatly towards and far therefore oh drove convenient less
© 2015. Limitless Web App Kit by Eugene Kopyov siddim.com