How to create: list groups

Learn how to use CSS to convert basic lists to 'list groups'.

  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy

Try It Yourself

How to create list groups

First step - Add HTML:

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>

Second step - Add CSS:

ul {
  list-style-type: none; /* Remove bullet points */
  padding: 0; /* Remove inner padding */
  margin: 0; /* Remove outer margin */
}
ul li {
  border: 1px solid #ddd; /* Add a thin border to each list item */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Add a gray background color */
  padding: 12px; /* Add some inner padding */
}

Try It Yourself

Related Pages

Tutorial:CSS List