Bootstrap list groups

https://i.ytimg.com/vi/sMMqPuBo2tw/hqdefault.jpg

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
http://csharp-video-tutorials.blogspot.com/2016/06/bootstrap-list-groups.html

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

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=”http://dell.com” class=”list-group-item”]Dell[/a]
[a href=”http://google.com” class=”list-group-item”]Google[/a]
[a href=”http://microsoft.com” 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]

Original source