Suggested Video Tutorials
Part 9 - Bootstrap typography
Part 10 - Bootstrap paragraphs
Part 11 - Bootstrap blockquotes and lists
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.
Output :
List group item with a badge : To create a badge, include a <span> element with .badge class inside the <li> element.
Output : Notice the new country "Australia" is displayed with the badge "New"
List group with hyperlinks : To create list group with hyperlinks, use <div> instead of <ul> and <a> instead of <li>
Output : 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. The following are the contextual classes
Highlight and disable list group items : Use .active class to highlight a list-group-item and .disabled class to disable a list item.
Output :
List group custom content : List groups can contain your own custom content. Nearly any HTML can be used. We will use the following 3 classes to create list group with custom
content.
Part 9 - Bootstrap typography
Part 10 - Bootstrap paragraphs
Part 11 - Bootstrap blockquotes and lists
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>
Output :
![bootstrap 3 list group examples](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLeDp6lzFPP0Vwz95wvvJMKECD0H49Oxq21NFC0J7oWGim4IqX5qV2FIiyx113jN-pJEI6LMuFNPy7Oy01bXP48FXlb51xUWoNw7jECw9PXfluyGUvZsMz4fmg-WjPPpfsMFtOqlCQ3WCf/s1600/bootstrap+3+list+group+examples.png)
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>
Output : Notice the new country "Australia" is displayed with the badge "New"
![bootstrap list group item badge](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqwlgRsR1kSfSjKBPifLFg4RFXkpPHmhhu-E66vGZJffhSoPPVlQYvse_v_8kp9aYnjepG7S542it6y5aLZVAXXer93Fa0pmrScVauRrVwPpHgcux3EmSLGknVyJ1qP2M5sTRH-0jqxido/s1600/bootstrap+list+group+item+badge.png)
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>
Output : 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.
![bootstrap list group anchor](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4ZZicYazNum2G8IWdZskrIUivJWo_y1v4yqymYYgTn1QvW8ft6u2DkwjjL0etqMUY4Qgwg4NQLt9CLLclfj-Ias4X_jYZd_d7ni7dEMrVY6qRf8S9FFZmzidsY3cqTbG4I9idOq_LUnf/s1600/bootstrap+list+group+anchor.png)
Styling list items : Use contextual classes to style the list items. The following are the contextual classes
![bootstrap list group item color](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBm-frdI_Z4tvSw-BZNheoxf88QFYh3F4QngBfN7B2H2yc8iZWdeuahiuOC65clLwdfhfWBq5GMb_GTlm8i04WiYP9py51ognOlGEotT5ieroyewwE-435ECl2Y2u9Hx1v61cS1bfGXk91/s1600/bootstrap+list+group+item+color.png)
<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>
![bootstrap list-group-item css](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKmmXHi0KfehUr-8vk3griBqAXHikR3vgNdLLJpP8box0UNguP58G9sc938frGR7jZjXuNZrgrYJSdNfDkbmV86Q5bipXtvBBSFIafDY2dmsARPC4qUnJYWpg6_J_JmCoarPS0PT_gE_0Z/s1600/bootstrap+list-group-item+css.png)
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>
Output :
![bootstrap list-group-item disabled](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfXrXOymZPU4Z_PqufbY6SwKyxu41iUo609D09w5QVwJNT3WI9iUMOvZnxyu8OL1a8cYt9ttevnnSpGtjjcJMWyh2OWlAGg1fCHcXxBkNdlXiN9yh4r6M9GRvRT_REsxV57GqMXPfTWI3d/s1600/bootstrap+list-group-item+disabled.png)
List group custom content : List groups can contain your own custom content. Nearly any HTML can be used. We will use the following 3 classes to create list group with custom
content.
![bootstrap list group custom content](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-f8mauO6URFH8rXvrfPCJ_gQ2RyXPao7Ka-0KnnnDuo6DuvZplJ9sJhSvW2hG5_x3JS5aN7O9sK_Hh2ie7fmu5ltMvBsyghwlOTdaEYjQJbsaRSEBiRtHcgCdJE_YUatYBWf79swTW4z/s1600/bootstrap+list+group+custom+content.png)
<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>
![bootstrap list group item custom content](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOShtqlPY7sQ_nNkAHTzULBuITRkoj0N7i2DvfB45E9tcklASj2UWyxQsWygRF2tgDTYHbJkgrG0ht3HUkyhAwJ441CSeDIkIqHzF1_ITJB1-HK6DudBqAuHLfBZgoHivdEyjpLplcOL4d/s1600/bootstrap+list+group+item+custom+content.png)
![bootstrap tutorial for beginners](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_03fbnWvW2zvfwA1f2qr0lAcU_tqV-0TcxHuTxHR37oSpIKPhyQkmsA6Dv8POqdnRpxs-G76aI9MiZgnazPGmzB4mOukWlc-9BWjarWMee69te9QcFt2GyIGUnfweX_cDQh4Zf-cGvjJY/s1600/bootstrap+tutorial+for+beginners.png)
If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.
ReplyDeleteI have a question - In my requirement, this list is dynamic. That works, but click event is not working as expected. Plus, I want user to have multi select option.
ReplyDelete