Search within TutorialsPark

Twitter Bootstrap Lists


To Display items in a list and list-groups with custom content.


Twitter Bootstrap: List Groups

1. List groups are flexible and powerful components to display both simple and complex element with custom content

2. A simple list group is created using class .list-group to encapsulate the list, and class .list-group-item to denote individual item.

Example: Twitter Bootstrap List Groups

Give it a TRY! »

Twitter Bootstrap: List Groups with Badges

1. You can add badges to any list group item using the class .badge , the badge by default it positioned at the extreme right of the list item.

Example:Twitter Bootstrap Badges with List Groups

Give it a TRY! »

Twitter Bootstrap: Linked Groups

1. The list items in a group can be liked by using the element <a> instead of <li> and parent element as <div> instead of <ul>.

Example:Twitter Bootstrap Linked Groups

Give it a TRY! »

Twitter Bootstrap: List Group with Contextual Classes

1. Relevance of the content can be enhanced adding the contextual classes .list-group-item-*

2. The possible values for * are success , information , warning and danger.

Example:Twitter Bootstrap Contextual Classes with List

Give it a TRY! »

Twitter Bootstrap: Contextual Classes List with Active States

1.Hover effects can be showed using the class .active .

Example:Twitter Bootstrap Contextual Classes List with Active States

Give it a TRY! »

Twitter Bootstrap: Custom Content Groups

1.A custom content group can be created using any HTML element within .list-group .

2. A heading can be created using the class .list-group-item-heading and the textual content using class .list-group-item-text .

Example:Twitter Bootstrap Custom Content Groups

Give it a TRY! »