Bootstrap List Groups - Bootstrap

What are List Groups in Bootstrap?

The determination of list group component is to extract complex and customized content in lists. To get a basic list group −

  • Add the class .list-group to element <ul>.
  • Add class .list-group-item to <li>.

The next instance proves this –

List Groups

How to add bandages to List Group?

Adding Badges to List Group


We can complement the badges component to any list group item and it will spontaneously be positioned on the right. Just add <span class = "badge"> within the <li> element. The next instance proves this –




Adding Badges to List Group

How to Link List Group items?

Linking List Group Items


By means of the anchor tags as a substitute of list items, we can link the list groups. We need to use <div> instead of <ul> element. The next instance proves this –


Linking List Group Items

How to Add Custom Content to List Group?

Add Custom Content to List Group


We can add any HTML content to the above linked list groups. The subsequent instance shows this –

Add Custom Content to List Group


All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Bootstrap Topics