Bootstrap List Groups

Bootstrap list group is used to create a group of list with list items. The most basic list group is an unordered list containing list items.

The class “.list-group” within the <ul> element and the class “.list-group-item” within the <li>element are used to create a basic list group.

Bootstrap List Group Example

        <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <style data-penci-cache='cached' id='soledad_pagespeed-bf1e80567e51ac09489385ff536b17f5'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}.alert h4{margin-top:0;color:inherit;}.alert>p,.alert>ul{margin-bottom:0;}.alert>p+p{margin-top:5px;}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6;}.alert-success hr{border-top-color:#c9e2b3;}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1;}.alert-info hr{border-top-color:#a6e1ec;}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;}.alert-warning hr{border-top-color:#f7e1b5;}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1;}.alert-danger hr{border-top-color:#e4b9c0;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="bf1e80567e51ac09489385ff536b17f5" data-soledad_pagespeed-delay data-href="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/css/bootstrap.min.css?ver=1693422050"/>
<div class="container">
<h2>Basic List Group Example</h2>
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul></div>
<p> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/ajax/libs/jquery/1.12.0/jquery.min.js?ver=1693422050"></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/js/bootstrap.min.js?ver=1693422051"></script>   </p>

Test it Now

Bootstrap List Group with Badges

The badges can also be added to a list group. They will automatically be positioned to the right side.

You have to create a <span> element with class ".badge" inside the list item to create a badge.

        <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <style data-penci-cache='cached' id='soledad_pagespeed-bf1e80567e51ac09489385ff536b17f5'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}.alert h4{margin-top:0;color:inherit;}.alert>p,.alert>ul{margin-bottom:0;}.alert>p+p{margin-top:5px;}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6;}.alert-success hr{border-top-color:#c9e2b3;}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1;}.alert-info hr{border-top-color:#a6e1ec;}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;}.alert-warning hr{border-top-color:#f7e1b5;}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1;}.alert-danger hr{border-top-color:#e4b9c0;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="bf1e80567e51ac09489385ff536b17f5" data-soledad_pagespeed-delay data-href="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/css/bootstrap.min.css?ver=1693422050"/>
<div class="container">
<h2>List Group With Badges</h2>
<ul class="list-group">
<li class="list-group-item"><span class="badge">12</span> New</li>
<li class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul></div>
<p> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/ajax/libs/jquery/1.12.0/jquery.min.js?ver=1693422050"></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/js/bootstrap.min.js?ver=1693422051"></script>   </p>

Test it Now

Bootstrap List Groups with Hyperlinks

You can also link items to the list group. This provides a grey background color on hover. You have to use <div> instead of <ul> and <a> instead of <li> element to create a list group with linked items.

        <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <style data-penci-cache='cached' id='soledad_pagespeed-bf1e80567e51ac09489385ff536b17f5'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}.alert h4{margin-top:0;color:inherit;}.alert>p,.alert>ul{margin-bottom:0;}.alert>p+p{margin-top:5px;}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6;}.alert-success hr{border-top-color:#c9e2b3;}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1;}.alert-info hr{border-top-color:#a6e1ec;}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;}.alert-warning hr{border-top-color:#f7e1b5;}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1;}.alert-danger hr{border-top-color:#e4b9c0;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="bf1e80567e51ac09489385ff536b17f5" data-soledad_pagespeed-delay data-href="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/css/bootstrap.min.css?ver=1693422050"/>
<div class="container">
<h2>List Group With Linked Items</h2>
<div class="list-group">     <a class="list-group-item" href="#">First item</a>     <a class="list-group-item" href="#">Second item</a>     <a class="list-group-item" href="#">Third item</a>   </div>
</div>
<p> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/ajax/libs/jquery/1.12.0/jquery.min.js?ver=1693422050"></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/js/bootstrap.min.js?ver=1693422051"></script>   </p>

Test it Now

Bootstrap List Group: Display active item

The class ".active" is used to highlight the current item. It specifies that the specific item is in active state.

        <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <style data-penci-cache='cached' id='soledad_pagespeed-bf1e80567e51ac09489385ff536b17f5'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}.alert h4{margin-top:0;color:inherit;}.alert>p,.alert>ul{margin-bottom:0;}.alert>p+p{margin-top:5px;}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6;}.alert-success hr{border-top-color:#c9e2b3;}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1;}.alert-info hr{border-top-color:#a6e1ec;}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;}.alert-warning hr{border-top-color:#f7e1b5;}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1;}.alert-danger hr{border-top-color:#e4b9c0;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="bf1e80567e51ac09489385ff536b17f5" data-soledad_pagespeed-delay data-href="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/css/bootstrap.min.css?ver=1693422050"/>
<div class="container">
<h2>Active Item in a List Group</h2>
<div class="list-group">     <a class="list-group-item active" href="#">First item (This is active item)</a>     <a class="list-group-item" href="#">Second item</a>     <a class="list-group-item" href="#">Third item</a>   </div>
</div>
<p> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/ajax/libs/jquery/1.12.0/jquery.min.js?ver=1693422050"></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/js/bootstrap.min.js?ver=1693422051"></script>    </p>

Test it Now

Bootstrap List Group: Display a disable item

The class ".disabled" is used to disable a specific item in the list group.

        <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <style data-penci-cache='cached' id='soledad_pagespeed-bf1e80567e51ac09489385ff536b17f5'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}.alert h4{margin-top:0;color:inherit;}.alert>p,.alert>ul{margin-bottom:0;}.alert>p+p{margin-top:5px;}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6;}.alert-success hr{border-top-color:#c9e2b3;}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1;}.alert-info hr{border-top-color:#a6e1ec;}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;}.alert-warning hr{border-top-color:#f7e1b5;}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1;}.alert-danger hr{border-top-color:#e4b9c0;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="bf1e80567e51ac09489385ff536b17f5" data-soledad_pagespeed-delay data-href="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/css/bootstrap.min.css?ver=1693422050"/>
<div class="container">
<h2>List Group With a Disabled Item</h2>
<div class="list-group">     <a class="list-group-item disabled" href="#">First item</a>     <a class="list-group-item" href="#">Second item</a>     <a class="list-group-item" href="#">Third item</a>   </div>
</div>
<p> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/ajax/libs/jquery/1.12.0/jquery.min.js?ver=1693422050"></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/js/bootstrap.min.js?ver=1693422051"></script>   </p>

Test it Now

Bootstrap List Group: Contextual Classes

You can add colors to the list items by using contextual classes.

The following classes are used for coloring list items:

.list-group-item-success
.list-group-item-info
.list-group-item-warning
.list-group-item-danger

        <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <style data-penci-cache='cached' id='soledad_pagespeed-bf1e80567e51ac09489385ff536b17f5'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}.alert h4{margin-top:0;color:inherit;}.alert>p,.alert>ul{margin-bottom:0;}.alert>p+p{margin-top:5px;}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6;}.alert-success hr{border-top-color:#c9e2b3;}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1;}.alert-info hr{border-top-color:#a6e1ec;}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;}.alert-warning hr{border-top-color:#f7e1b5;}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1;}.alert-danger hr{border-top-color:#e4b9c0;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="bf1e80567e51ac09489385ff536b17f5" data-soledad_pagespeed-delay data-href="https://www.tutoraspire.com/wp-content/cache/min/1/bootstrap/3.3.6/css/bootstrap.min.css?ver=1693422050"/>
<div class="container">
<h2>List Group With Contextual Classes</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
<h2>Linked Items With Contextual Classes</h2>
<p>     <a class="list-group-item list-group-item-success" href="#">First item</a>     <a class="list-group-item list-group-item-info" href="#">Second item</a>     <a class="list-group-item list-group-item-warning" href="#">Third item</a>     <a class="list-group-item list-group-item-danger" href="#">Fourth item</a>   </p></div>
<p> </p>

Bootstrap List Group

Bootstrap List Groups

Bootstrap List Group Example

Bootstrap List Group with Badges

Bootstrap List Groups with Hyperlinks

Bootstrap List Group: Display active item

Bootstrap List Group: Display a disable item

Bootstrap List Group: Contextual Classes

Bootstrap 4 Textarea

Bootstrap Popover

You may also like