MoreLesson 200Free preview

List Group

This lesson is part of How To · All levels

Summary

A list group is a vertical list in which each row appears as a separate item with a border or background. This component is suitable for setting menus, message lists, or side navigation. By removing the built-in bullet and adding an antithetical border, the regular list becomes a neat and consistent component.

Key points

Delete the bullet with list-style: none and reset padding on ul
Give the boundary-bottom to each item, then remove the last boundary item.
Use the .active class to mark the item being selected
Add a hover effect to make the item feel interactive

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.