HomeОбразованиеRelated VideosMore From: kudvenkat

Bootstrap list groups

254 ratings | 68817 views
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]
Html code for embedding videos on your blog
Text Comments (18)
adnan yousaf (8 months ago)
Very nice I pray for U for kind information keep it up
Chaînons Manquants (1 year ago)
THANK YOU !
Melwyn Rodrigues (2 years ago)
Thanks Venkat
Mohammad Jaker Khan (2 years ago)
Very nice.
Kedar Koli (2 years ago)
nc videos
Scientist (2 years ago)
what if i want to change the color to something else like pink, orange,black ?
Irina Mur (1 year ago)
you can override the bootstrap styles in your own CSS file
Abdul Wahab (2 years ago)
<h1>Thanks from Pakistan</h1>
Kiran Ugale (1 year ago)
hi, enjoy the video! now see bootstrap video in Hindi. its available on my channel. check it out.https://www.youtube.com/kiranugale
Abdullah Ragheb (2 years ago)
thanks sir .god bless you how can i connect asp.net controls with bootstrap ??
RAQIBUL ALAM RASHED (2 years ago)
Thanks from Bangladesh
RAQIBUL ALAM RASHED (2 years ago)
Thanks from Bangladesh
someonesmart21 (2 years ago)
what to do when you want to redirect on another tab ?
Bimal Das (2 years ago)
thank you sir. may God bless you.
Ahmed Mustafa (2 years ago)
thank you from Egypt 😉😀
Kiran Ugale (1 year ago)
hi, enjoy the video! now see bootstrap video in Hindi. its available on my channel. check it out.https://www.youtube.com/kiranugale
Muhammad Rehbar Sheikh (2 years ago)
Thank you venkat sir! as usual best explanation, very needful. i'm vry happy to see your hardwork. god bless you sir.
Preethy Mitra (2 years ago)
I am from a Pharmacy Background with 0 programming Knowledge and believe me you are helping me a lot!!!. Thanks a ton.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.