Home >>Bootstrap Tutorial >Bootstrap List Groups

Bootstrap List Groups

Bootstrap list groups are used for display the series of content. You have to create <ul> element with the class .list-group within the

element, create <li> with a class .list-group-item to create a list of items. To show the current page, add class .active in <li> element.

Let's take an example of bootstrap list groups:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap List Groups</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Basic List Group</h2>
  <ul class="list-group">
    <li class="list-group-item active">1</li>
    <li class="list-group-item">2</li>
    <li class="list-group-item">3</li>
  </ul>
</div>
</body>
</html>

Output:

Basic List Group

Flush / Remove Borders

Flush in list groups are useful to remove the borders and rounded corners by adding class .list-group-flush together with the class list-group in <ul> element.

Let's take an example of Flush or Remove Borders:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap List Groups</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flush List Groups</h2>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
    <li class="list-group-item">3</li>
  </ul>
</div>
</body>
</html>

Output:

Flush List Groups

List Group With Linked Items/ disabled

To create a list group with linked item use <div> element with a class list-group instead of <ul> and anchor tag <a> instead of <li> with the class .list-group-item and if you want on hover a grey background color, add class .list-group-item-action. You can also disable the item using class .disabled with the class .list-group-item.

Let's take an example of List Group with Linked Items/ disabled:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap List Groups</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Linked Items/ disabled</h2>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">1</a>
  <a href="#" class="list-group-item list-group-item-action">2</a>
  <a href="#" class="list-group-item list-group-item-action">3</a>
   <a href="#" class="list-group-item disabled">disabled</a>
</div>
</div>
</body>
</html>

Output:

Linked Items/ disabled

1 2 3 disabled

Horizontal List Group

You can also create a list group in a horizontal form. For this, you have to add class list-group-horizontal in <ul> element together with the class .list-group.

Let's take an example of Horizontal List Group:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap List Groups</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Horizontal List Group</h2>
<div class="list-group list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action">One</a>
  <a href="#" class="list-group-item list-group-item-action">Two</a>
  <a href="#" class="list-group-item list-group-item-action">Three</a>
</div>
</div>
</body>
</html>

Output:

Horizontal List Group

One Two Three

Contextual Classes

Contextual classes are predefined in bootstrap. You can use contextual classes to change the color of the background in list groups. The classes you use for coloring list items are: .list-group-item-success, list-group-item-primary, list-group-item-secondary, list-group-item-warning, list-group-item-info, list-group-item-danger, list-group-item-dark and list-group-item-light.

Let's take an example of contextual classes in list group item:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap List Groups</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>contextual classes</h2>
<ul class="list-group">
  <li class="list-group-item list-group-item-info">Info</li>
  <li class="list-group-item list-group-item-success">Success</li>
    <li class="list-group-item list-group-item-warning">Warning</li>
  <li class="list-group-item list-group-item-secondary">Secondary</li>
  <li class="list-group-item list-group-item-danger">Danger</li>
    <li class="list-group-item list-group-item-dark">Dark</li>
  <li class="list-group-item list-group-item-primary">Primary</li>
  <li class="list-group-item list-group-item-light">Light</li>
</ul>
<h2>contextual classes with linked items</h2>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light</a>
</div>
</div>
</body>
</html>

Output:

contextual classes

Info
Success
Warning
Secondary
Danger
Dark
Primary
Light

contextual classes with linked items

Info Success Warning Secondary Danger Dark Primary Light

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads