• Saturday , 18 August 2018

Bootstrap list groups

Code Canyon
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

3d Ocean

Related Posts

14 Comments

  1. Chaînons Manquants
    June 29, 2018 at 05:45

    THANK YOU !

  2. Melwyn Rodrigues
    June 29, 2018 at 05:45

    Thanks Venkat

  3. Mohammad Jaker Khan
    June 29, 2018 at 05:45

    Very nice.

  4. Kedar Koli
    June 29, 2018 at 05:45

    nc videos

  5. Scientist
    June 29, 2018 at 05:45

    what if i want to change the color to something else like pink, orange,black ?

  6. Abdul Wahab
    June 29, 2018 at 05:45

    <h1>Thanks from Pakistan</h1>

  7. Abdullah Ragheb
    June 29, 2018 at 05:45

    thanks sir .god bless you
    how can i connect asp.net controls with bootstrap ??

  8. RAQIBUL ALAM RASHED
    June 29, 2018 at 05:45

    Thanks from Bangladesh

  9. RAQIBUL ALAM RASHED
    June 29, 2018 at 05:45

    Thanks from Bangladesh

  10. someonesmart21
    June 29, 2018 at 05:45

    what to do when you want to redirect on another tab ?

  11. Bimal Das
    June 29, 2018 at 05:45

    thank you sir. may God bless you.

  12. Ahmed Mustafa
    June 29, 2018 at 05:45

    thank you from Egypt 😉😀

  13. Muhammad Rehbar Sheikh
    June 29, 2018 at 05:45

    Thank you venkat sir! as usual best explanation, very needful. i'm vry happy to see your hardwork. god bless you sir.

  14. Preethy Mitra
    June 29, 2018 at 05:45

    I am from a Pharmacy Background with 0 programming Knowledge and believe me you are helping me a lot!!!. Thanks a ton.

Leave A Comment

You must be logged in to post a comment.