Home >>Bootstrap Tutorial >Bootstrap List Groups

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

    • 1
    • 2
    • 3

    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

    • 1
    • 2
    • 3

    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

    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

    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