bootstrap 3 list group examples
bootstrap list group item badge
bootstrap list group anchor
bootstrap list group item color
bootstrap list-group-item css
bootstrap list-group-item disabled
bootstrap list group custom content
Link for slides, code samples and text version of the video
Link for all dot net and sql server video tutorial playlists
Bootstrap list groups are useful for displaying simple lists of elements, as well as complex ones with custom content.
Basic list group : To create a basic list group, create an unordered list. Use .list-group class on the [ul] element and .list-group-item class on the [li] element.
[ul class=”list-group”]
[li class=”list-group-item”]India[/li]
[li class=”list-group-item”]USA[/li]
[li class=”list-group-item”]UK[/li]
[/ul]
List group item with a badge : To create a badge, include a [span] element with .badge class inside the [li] element.
[ul class=”list-group”]
[li class=”list-group-item”]India[/li]
[li class=”list-group-item”]USA[/li]
[li class=”list-group-item”]UK[/li]
[li class=”list-group-item”]
Australia
[span class=”badge”]New[/span]
[/li]
[/ul]
List group with hyperlinks : To create list group with hyperlinks, use [div] instead of [ul] and [a] instead of [li]
[div class=”list-group”]
[a href=” class=”list-group-item”]Dell[/a]
[a href=” class=”list-group-item”]Google[/a]
[a href=” class=”list-group-item”]Microsoft[/a]
[/div]
On hover the cursor changes to a hand symbol and the background colour changes to grey. When you click on an item, you will be redirected to the respective URL.
Styling list items : Use contextual classes to style the list items.
[ul class=”list-group”]
[li class=”list-group-item list-group-item-danger”]India[/li]
[li class=”list-group-item list-group-item-info”]USA[/li]
[li class=”list-group-item list-group-item-success”]UK[/li]
[li class=”list-group-item list-group-item-warning”]Australia[/li]
[/ul]
Highlight and disable list group items : Use .active class to highlight a list-group-item and .disabled class to disable a list item.
[ul class=”list-group”]
[li class=”list-group-item disabled”]Disabled Item[/li]
[li class=”list-group-item active”]Active Item[/li]
[li class=”list-group-item”]Other Item 1[/li]
[li class=”list-group-item”]Other Item 2[/li]
[/ul]
List group custom content : List groups can contain your own custom content. Nearly any HTML can be used.
[div class=”list-group”]
[a href=”#” class=”list-group-item”]
[h4 class=”list-group-item-heading”]List Group Item 1 Heading[/h4]
[p class=”list-group-item-text”]List Group Item 1 Text[/p]
[/a]
[a href=”#” class=”list-group-item”]
[h4 class=”list-group-item-heading”]List Group Item 2 Heading[/h4]
[p class=”list-group-item-text”]List Group Item 2 Text[/p]
[/a]
[a href=”#” class=”list-group-item”]
[h4 class=”list-group-item-heading”]List Group Item 3 Heading[/h4]
[p class=”list-group-item-text”]List Group Item 3 Text[/p]
[/a]
[/div]
