Lists
Bootstrap can strip list bullets, place items inline, or turn lists into list groups.
In this page:
Syntax
<ul class="list-unstyled">
<li>item</li>
</ul>
<ul class="list-inline">
<li class="list-inline-item">item</li>
</ul>Lists
.list-unstyled removes bullets and left padding, .list-inline with .list-inline-item lays items in a row, and .list-group styles a list as a bordered component with .list-group-item entries. Modifiers add active, disabled and coloured items.
Note:
list-group-flush removes the outer borders for use inside cards.
Example: Lists
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<ul class="list-unstyled"><li>No bullets</li><li>Just text</li></ul>
<ul class="list-inline"><li class="list-inline-item">Home</li><li class="list-inline-item">About</li><li class="list-inline-item">Contact</li></ul>
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Regular item</li>
<li class="list-group-item disabled">Disabled item</li>
</ul>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Forgetting list-inline-item
- Using list-group on non-list markup without items
- Removing bullets with inline CSS
Chapter Summary
- list-unstyled removes bullets
- list-inline plus list-inline-item
- list-group for component lists
- Modifiers add states
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: