Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to transform a basic list into a \"list group\" with CSS?
A list group is a styled version of a basic HTML list that removes bullets and applies consistent borders and spacing to create a clean, card-like appearance. This is commonly used in modern web design for navigation menus, content lists, and UI components.
Syntax
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
border: 1px solid color;
padding: value;
background-color: color;
}
Step 1: Create an Unordered List
Start with a basic HTML unordered list using the <ul> and <li> elements −
<ul>
<li>Lion</li>
<li>Tiger</li>
<li>Leopard</li>
<li>Cheetah</li>
<li>Jaguar</li>
</ul>
Step 2: Remove Default List Styling
Remove bullets, padding, and margins from the list to create a clean foundation −
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
Step 3: Style the List Items
Apply borders, background colors, and padding to transform individual list items into styled group elements −
ul li {
border: 1px solid #ddd;
background-color: #f8f9fa;
padding: 12px;
font-size: 16px;
}
Complete Example
Here's the complete code that transforms a basic list into a styled list group −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 20px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
ul li {
border: 1px solid #ddd;
background-color: #f8f9fa;
padding: 15px;
font-size: 16px;
border-bottom: none;
}
ul li:last-child {
border-bottom: 1px solid #ddd;
}
ul li:hover {
background-color: #e9ecef;
}
</style>
</head>
<body>
<h2>Wild Cats List Group</h2>
<ul>
<li>Lion</li>
<li>Tiger</li>
<li>Leopard</li>
<li>Cheetah</li>
<li>Jaguar</li>
</ul>
</body>
</html>
A styled list group appears with five items (Lion, Tiger, Leopard, Cheetah, Jaguar) displayed as connected cards with light gray backgrounds, borders, rounded corners, and a subtle shadow. Each item changes to a darker gray when hovered.
Conclusion
Transforming a basic list into a list group involves removing default list styling and applying consistent borders, backgrounds, and spacing. This creates a modern, card-like appearance that's perfect for navigation menus and content organization.
282 Views
