YouTip- ` element.
* Add the class **.list-group-item** to the `
- ` element.
The following example demonstrates this:
## Example
- Free Domain Registration
- Free Window Space Hosting
- Number of Images
- 24*7 Support
- Annual Update Cost
- ` element. The following example demonstrates this: ## Example
- Free Domain Registration
- Free Window Space Hosting
- Number of Images
- New 24*7 Support
- Annual Update Cost
- New Discount Offers
- ` element. The following example demonstrates this: ## Example Free Domain Registration 24*7 SupportFree Window Space HostingNumber of ImagesAnnual Update Cost [Try it »](#) The result is as follows:  ## Adding Custom Content to the List Group We can add any HTML content to the list group that already has links. The following example demonstrates this: ## Example [Try it »](#) The result is as follows:  * * * ## Horizontal List The lists in the examples above are displayed vertically. If we need a horizontal list, we can achieve it with the following code: ## Example .list-group-horizontal.list-group-item{display:inline-block; }.list-group-horizontal.list-group-item{margin-bottom:0; margin-left:-4 px; margin-right:0; }.list-group-horizontal.list-group-item:first-child{border-top-right-radius:0; border-bottom-left-radius:4 px; }.list-group-horizontal.list-group-item:last-child{border-top-right-radius:4 px; border-bottom-left-radius:0; } [Try it »](#) The result is as follows: 
Bootstrap List Group
In this chapter, we will explain list groups. List group components are used to present complex and custom content in list form. The steps to create a basic list group are as follows:
* Add the class **.list-group** to the `