Bootstrap list groups are useful for displaying simple lists of elements, as well as complex ones with custom content.
Bootstrap tutorial for beginners
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.
Bootstrap tutorial for beginners
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/AVvXsEgI7W2Reuv1MPLbDL-AKPvUtQuT4i98vl1LzvC7X5_9hfibDQogiMJBOBFaP1iWWFsRRIGSy6Q9Gn2leVLLgvQbZXJrQCOSR8IooBfY3oAG1nVFrqluZdhL6_ZQEpsCqXLBtVCyYvNIyV2C/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/AVvXsEjOSLerFenIZo9jK3FkjR4lqUoM7RP5pZ4lujj2zcujSGwu8rbzZMXetOFBBF-XMttdHq67111V26H3HUzYbWPtPxhilbBigRsqr1xLkLHO4rsiEZYHIF76IAwwUExZP0KARIUiFGp92PRM/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/AVvXsEjWSPevqAoR3SrFRnIp_UC-n0jNk4hgAujC_jXrulrBZtG9-JFcHqgSGsTe4YE_AVDpONETT0pLpPIco684PZaUl6nsNlAkkc80IX75WQ_7WgRpSyhH_6ULnU3hhIzjz_0xLDGhWcNnnVGD/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/AVvXsEghwEQLOO2Bp9z2ANjey1t946qUxZIhqruERpVyzIof9CrayB1VXcHqq5aj9nqoqYgPBHEv9dfBo-DUizcdGXYuBLrrAJvSHZVYexwkuvpzj0Dji1n9WSPt_VNfnkNUZSO0cDMNBEQL-xba/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/AVvXsEjFW0bM5DBc0QU6vvg0QrQGK_tBP1xh-Y8NO3x5KEW2MT0r2s95SU695QXHqx2t6V0KBqVDi1dsHKKhqdT_uFwyUQr7eh4AMWVhBpHcD2QpzyfKyVv4nNFiR-xzOEumLP6KrXNNM3vmOP34/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/AVvXsEgtjOteDSX-DaWOPBdEbtR5kAlCPxWnA5OhzoPBf_40bbpKXYt_Z4REvkDbcqpmJs8V4JD-4HvzYiBf2GHJrrmceZQPmrfPrH2sADEw0aLWxphrsrVOUngmKu2kgeOiCjgzc_Yj5IZ4ljko/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/AVvXsEgn-g5UiIECP4Gk3ttSA2IMXNBX-1e9G3L7rxbo2f04tUmae4SHPEbdYjsDRiL8i66BZOosFlnuoGCHi7NEw-FMYIx-tIA6fhmaGyP5Y0Berlcvg6KMIUmV653d3GPAfpVplRBolXLdn5qf/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/AVvXsEi9hgd0Rm4S09q-OqxJV8iUN7c4AKiTC4fQxk9q_7RVdHqAOHe6uFw1Y-CX6lYFIZtHfyprH_fKjQAhaHMQ3HDSJWp2ltZFrFiJIiF2_imznsH-ySI2wQXFruN-pbcDnEZvzAOlUxCJrOB8/s1600/bootstrap+list+group+item+custom+content.png)