Core Code
Core Code Modern Dev Handbook

Horizontal List Group

Arrange list items horizontally using list-group-horizontal.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<ul class="list-group list-group-horizontal">

<li class="list-group-item">Home</li>
<li class="list-group-item">Products</li>
<li class="list-group-item">Contact</li>

</ul>

</div>

</body>
</html>

More BS5 List Groups Examples (7)

example Basic List Group open example example Active List Item open example example Disabled List Item open example example Linked List Group open example example Flush List Group open example example List with Badges open example example Sidebar Menu Example open example