Latest web development tutorials

Bootstrap list groups

In this chapter we will explain the list of groups. List of components used in the list presented in the form of complex and custom content. Create a basic list of groups as follows:

  • The element <ul> Addclass .list-group.
  • To the <li> Addclass .list-group-item.

The following example illustrates this point:

Examples

<Ul class = "list-group"> <Li class = "list-group-item "> free domain name registration </ li> <Li class = "list-group-item "> free hosting space Window </ li> <Li class = "list-group-item "> The number of images </ li> <Li class = "list-group-item "> 24 * 7 support </ li> <Li class = "list-group-item "> Update annual cost </ li> </ Ul>

try it"

The results are as follows:

The basic list of groups

Add a badge to the list of groups

We can add a badge components to any list item, it is automatically positioned to the right. Only you need to add a<span class = "badge"> to the <li> element.The following example illustrates this point:

Examples

<Ul class = "list-group"> <Li class = "list-group-item "> free domain name registration </ li> <Li class = "list-group-item "> free hosting space Window </ li> <Li class = "list-group-item "> The number of images </ li> <Li class = "list-group-item "> <Span class = "badge"> new </ span> 24 * 7 support </ li> <Li class = "list-group-item "> Update annual cost </ li> <Li class = "list-group-item "> <Span class = "badge"> new </ span> discount </ li> </ Ul>

try it"

The results are as follows:

The list of groups badges

Add a link to the list of groups

By using the anchor tag instead of a list of items, we can add a link to the list of groups. We need to use <div> instead of <ul> element. The following example illustrates this point:

Examples

<A href = "#" class = "list-group-item active"> free domain name registration </ a> <A href = "#" class = "list-group-item "> 24 * 7 support </ a> <A href = "#" class = "list-group-item "> free hosting space Window </ a> <A href = "#" class = "list-group-item "> The number of images </ a> <A href = "#" class = "list-group-item "> Update annual cost </ a>

try it"

The results are as follows:

List group links

Add custom content to the list of groups

We have added links to the top of the list of groups to add arbitrary HTML content. The following example illustrates this point:

Examples

<Div class = "list-group"> <A href = "#" class = "list-group-item active"> <H4 class = "list-group-item -heading"> Portal package </ h4> </ A> <A href = "#" class = "list-group-item "> <H4 class = "list-group-item -heading"> free domain name registration </ h4> <P class = "list-group-item -text"> You will be free domain name registration through the website. </ P> </ A> <A href = "#" class = "list-group-item "> <H4 class = "list-group-item -heading"> 24 * 7 support </ h4> <P class = "list-group-item -text"> We offer 24 * 7 support. </ P> </ A> </ Div> <Div class = "list-group"> <A href = "#" class = "list-group-item active"> <H4 class = "list-group-item -heading"> business website package </ h4> </ A> <A href = "#" class = "list-group-item "> <H4 class = "list-group-item -heading"> free domain name registration </ h4> <P class = "list-group-item -text"> You will be free domain name registration through the website. </ P> </ A> <A href = "#" class = "list-group-item "> <H4 class = "list-group-item -heading"> 24 * 7 support </ h4> <P class = "list-group-item -text"> We offer 24 * 7 support. </ P> </ A> </ Div>

try it"

The results are as follows:

The list of groups custom content