Consistent Styling for Nested Lists with Bootstrap

HtmlCssTwitter BootstrapTwitter Bootstrap-3Nested Lists

Html Problem Overview

Is there a way to make nested lists in twitter bootstrap look like a normal list, with the nested items simply indented (and have it work for an arbitrarily deep nesting)? By default, nested lists look like this:

Nested lists with bootstrap

<ul class="list-group">
    <li class="list-group-item">One</li>
    <li class="list-group-item">Two
        <ul class="list-group">
            <li class="list-group-item">Item 2a</li>
            <li class="list-group-item">Item 2b</li>
        </ul>
    </li>
    <li class="list-group-item">Three
        <ul class="list-group">
            <li class="list-group-item">Item 3a</li>
            <li class="list-group-item">Item 3b</li>
        </ul>
    </li>
</ul>

How can I make these nested lists appear like this (or in some similar way):

What nested lists should look like

In case you missed the link above, here is the JSFiddle: https://jsfiddle.net/7o8rp0kv/1/

Html Solutions

Solution 1 - Html

Nested Group Lists

Nested Group Lists

.just-padding {
  padding: 15px;
}

.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
}

.list-group.list-group-root .list-group {
  margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 45px;
}


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="just-padding">

<div class="list-group list-group-root well">
  
  <a href="#" class="list-group-item">Item 1</a>
  <div class="list-group">
    
    <a href="#" class="list-group-item">Item 1.1</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 1.1.1</a>
      <a href="#" class="list-group-item">Item 1.1.2</a>
      <a href="#" class="list-group-item">Item 1.1.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 1.2</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 1.2.1</a>
      <a href="#" class="list-group-item">Item 1.2.2</a>
      <a href="#" class="list-group-item">Item 1.2.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 1.3</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 1.3.1</a>
      <a href="#" class="list-group-item">Item 1.3.2</a>
      <a href="#" class="list-group-item">Item 1.3.3</a>
    </div>
    
  </div>
  
  <a href="#" class="list-group-item">Item 2</a>
  <div class="list-group">
    
    <a href="#" class="list-group-item">Item 2.1</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 2.1.1</a>
      <a href="#" class="list-group-item">Item 2.1.2</a>
      <a href="#" class="list-group-item">Item 2.1.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 2.2</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 2.2.1</a>
      <a href="#" class="list-group-item">Item 2.2.2</a>
      <a href="#" class="list-group-item">Item 2.2.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 2.3</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 2.3.1</a>
      <a href="#" class="list-group-item">Item 2.3.2</a>
      <a href="#" class="list-group-item">Item 2.3.3</a>
    </div>
    
  </div>
  
  
  <a href="#" class="list-group-item">Item 3</a>
  <div class="list-group">
    
    <a href="#" class="list-group-item">Item 3.1</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 3.1.1</a>
      <a href="#" class="list-group-item">Item 3.1.2</a>
      <a href="#" class="list-group-item">Item 3.1.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 3.2</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 3.2.1</a>
      <a href="#" class="list-group-item">Item 3.2.2</a>
      <a href="#" class="list-group-item">Item 3.2.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 3.3</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 3.3.1</a>
      <a href="#" class="list-group-item">Item 3.3.2</a>
      <a href="#" class="list-group-item">Item 3.3.3</a>
    </div>
    
  </div>
  
</div>
  
</div>

View on fiddler: https://jsfiddle.net/u3gd85cj/

Nested Group Lists (Collapsable)

Nested Group Lists (Collapsable)

$(function() {
        
  $('.list-group-item').on('click', function() {
    $('.glyphicon', this)
      .toggleClass('glyphicon-chevron-right')
      .toggleClass('glyphicon-chevron-down');
  });

});


.just-padding {
  padding: 15px;
}

.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
}

.list-group.list-group-root .list-group {
  margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 45px;
}

.list-group-item .glyphicon {
  margin-right: 5px;
}


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="just-padding">

<div class="list-group list-group-root well">
  
  <a href="#item-1" class="list-group-item" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i>Item 1
  </a>
  <div class="list-group collapse" id="item-1">
    
    <a href="#item-1-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
    </a>
    <div class="list-group collapse" id="item-1-1">
      <a href="#" class="list-group-item">Item 1.1.1</a>
      <a href="#" class="list-group-item">Item 1.1.2</a>
      <a href="#" class="list-group-item">Item 1.1.3</a>
    </div>
    
    <a href="#item-1-2" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
    </a>
    <div class="list-group collapse" id="item-1-2">
      <a href="#" class="list-group-item">Item 1.2.1</a>
      <a href="#" class="list-group-item">Item 1.2.2</a>
      <a href="#" class="list-group-item">Item 1.2.3</a>
    </div>
    
    <a href="#item-1-3" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
    </a>
    <div class="list-group collapse" id="item-1-3">
      <a href="#" class="list-group-item">Item 1.3.1</a>
      <a href="#" class="list-group-item">Item 1.3.2</a>
      <a href="#" class="list-group-item">Item 1.3.3</a>
    </div>
    
  </div>
  
  <a href="#item-2" class="list-group-item" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i>Item 2
  </a>
  <div class="list-group collapse" id="item-2">
    
    <a href="#item-2-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 2.1
    </a>
    <div class="list-group collapse" id="item-2-1">
      <a href="#" class="list-group-item">Item 2.1.1</a>
      <a href="#" class="list-group-item">Item 2.1.2</a>
      <a href="#" class="list-group-item">Item 2.1.3</a>
    </div>
    
    <a href="#item-2-2" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 2.2
    </a>
    <div class="list-group collapse" id="item-2-2">
      <a href="#" class="list-group-item">Item 2.2.1</a>
      <a href="#" class="list-group-item">Item 2.2.2</a>
      <a href="#" class="list-group-item">Item 2.2.3</a>
    </div>
    
    <a href="#item-2-3" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 2.3
    </a>
    <div class="list-group collapse" id="item-2-3">
      <a href="#" class="list-group-item">Item 2.3.1</a>
      <a href="#" class="list-group-item">Item 2.3.2</a>
      <a href="#" class="list-group-item">Item 2.3.3</a>
    </div>
    
  </div>
  
  
  <a href="#item-3" class="list-group-item" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i>Item 3
  </a>
  <div class="list-group collapse" id="item-3">
    
    <a href="#item-3-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 3.1
    </a>
    <div class="list-group collapse" id="item-3-1">
      <a href="#" class="list-group-item">Item 3.1.1</a>
      <a href="#" class="list-group-item">Item 3.1.2</a>
      <a href="#" class="list-group-item">Item 3.1.3</a>
    </div>
    
    <a href="#item-3-2" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 3.2
    </a>
    <div class="list-group collapse" id="item-3-2">
      <a href="#" class="list-group-item">Item 3.2.1</a>
      <a href="#" class="list-group-item">Item 3.2.2</a>
      <a href="#" class="list-group-item">Item 3.2.3</a>
    </div>
    
    <a href="#item-3-3" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 3.3
    </a>
    <div class="list-group collapse" id="item-3-3">
      <a href="#" class="list-group-item">Item 3.3.1</a>
      <a href="#" class="list-group-item">Item 3.3.2</a>
      <a href="#" class="list-group-item">Item 3.3.3</a>
    </div>
    
  </div>
  
</div>
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

View on fiddler: https://jsfiddle.net/ann7tctp/

Solution 2 - Html

This was my approach:

    .list-group-collapse li > ul li:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .list-group-collapse li > ul {
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: -11px;
    }

If you are using BS3, then adding the .list-group-collapse class to your grouped list will do the trick. See JSFiddle: https://jsfiddle.net/oscar_dr/d2wpn8sd/1/

Of course, you could extend BS with this class or change the values to your custom measures if you have a customized Bootstrap.

> EDIT: Added snippet to answer:

.list-group-collapse li>ul li:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.list-group-collapse li>ul {
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -11px;
}


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <h4>
        With collapse
      </h4>
      <hr>
      <ul class="list-group list-group-collapse">
        <li class="list-group-item">
          <h3>
            Level 1
          </h3>

          <ul class="list-group">
            <li class="list-group-item">
              <h4>
                Level 2.1
              </h4>

              <ul class="list-group">
                <li class="list-group-item">
                  Item 2.1.1
                </li>
                <li class="list-group-item">
                  Item 2.1.2
                </li>
                <li class="list-group-item">
                  Item 2.1.3
                </li>
              </ul>
            </li>

            <li class="list-group-item">
              <h4>
                Level 2.2
              </h4>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="col-xs-6">
      <h4>
        Without collapse
      </h4>
      <hr>
      <ul class="list-group">
        <li class="list-group-item">
          <h3>
            Level 1
          </h3>

          <ul class="list-group">
            <li class="list-group-item">
              <h4>
                Level 2.1
              </h4>

              <ul class="list-group">
                <li class="list-group-item">
                  Item 2.1.1
                </li>
                <li class="list-group-item">
                  Item 2.1.2
                </li>
                <li class="list-group-item">
                  Item 2.1.3
                </li>
              </ul>
            </li>

            <li class="list-group-item">
              <h4>
                Level 2.2
              </h4>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Solution 3 - Html

I modified Marcos answer to work with Bootstrap 4 (and fort-awesome icons) since glyphicons are no longer part of Bootstrap. The main changes are:

  • replace glyphicons by fort-awesome icons
  • add class list-group-item-action to list-group-item
  • redefine .collapse in css (maybe there is a better approach)

.collapse {
    display: none;
    &.show {
        display: block;
    }
}

[JSFiddle][1]

[1]: https://jsfiddle.net/ann7tctp/368/ "example"

Solution 4 - Html

Bootstrap 4 Update

I wanted to be able to use this with bootstrap 4. Hope this helps someone else.

Here is the code using font awesome (since glyphicons are not supported in V4).

Working jfiddle

Html

<div class="just-padding">

  <div class="list-group list-group-root card">

    <a href="#item-1" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i></i>Item 1
    </a>
    <div class="list-group collapse" id="item-1">

    <a href="#item-1-1" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 1.1
    </a>
    <div class="list-group collapse" id="item-1-1">
      <a href="#" class="list-group-item">Item 1.1.1</a>
      <a href="#" class="list-group-item">Item 1.1.2</a>
      <a href="#" class="list-group-item">Item 1.1.3</a>
    </div>

    <a href="#item-1-2" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 1.2
    </a>
    <div class="list-group collapse" id="item-1-2">
      <a href="#" class="list-group-item">Item 1.2.1</a>
      <a href="#" class="list-group-item">Item 1.2.2</a>
     <a href="#" class="list-group-item">Item 1.2.3</a>
    </div>

    <a href="#item-1-3" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 1.3
    </a>
    <div class="list-group collapse" id="item-1-3">
      <a href="#" class="list-group-item">Item 1.3.1</a>
      <a href="#" class="list-group-item">Item 1.3.2</a>
      <a href="#" class="list-group-item">Item 1.3.3</a>
    </div>

  </div>

  <a href="#item-2" class="list-group-item" data-toggle="collapse">
    <i class="fas fa-angle-right mr-2"></i>Item 2
  </a>
  <div class="list-group collapse" id="item-2">

    <a href="#item-2-1" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 2.1
    </a>
    <div class="list-group collapse" id="item-2-1">
      <a href="#" class="list-group-item">Item 2.1.1</a>
      <a href="#" class="list-group-item">Item 2.1.2</a>
      <a href="#" class="list-group-item">Item 2.1.3</a>
    </div>

    <a href="#item-2-2" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 2.2
    </a>
    <div class="list-group collapse" id="item-2-2">
      <a href="#" class="list-group-item">Item 2.2.1</a>
      <a href="#" class="list-group-item">Item 2.2.2</a>
      <a href="#" class="list-group-item">Item 2.2.3</a>
    </div>

    <a href="#item-2-3" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 2.3
    </a>
    <div class="list-group collapse" id="item-2-3">
      <a href="#" class="list-group-item">Item 2.3.1</a>
      <a href="#" class="list-group-item">Item 2.3.2</a>
      <a href="#" class="list-group-item">Item 2.3.3</a>
    </div>
  </div>

  <a href="#item-3" class="list-group-item" data-toggle="collapse">
    <i class="fas fa-angle-right mr-2"></i>Item 3
  </a>
  <div class="list-group collapse" id="item-3">

    <a href="#item-3-1" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 3.1
    </a>
    <div class="list-group collapse" id="item-3-1">
      <a href="#" class="list-group-item">Item 3.1.1</a>
      <a href="#" class="list-group-item">Item 3.1.2</a>
      <a href="#" class="list-group-item">Item 3.1.3</a>
    </div>

    <a href="#item-3-2" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 3.2
    </a>
    <div class="list-group collapse" id="item-3-2">
      <a href="#" class="list-group-item">Item 3.2.1</a>
      <a href="#" class="list-group-item">Item 3.2.2</a>
      <a href="#" class="list-group-item">Item 3.2.3</a>
    </div>

    <a href="#item-3-3" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 3.3
    </a>
    <div class="list-group collapse" id="item-3-3">
      <a href="#" class="list-group-item">Item 3.3.1</a>
      <a href="#" class="list-group-item">Item 3.3.2</a>
      <a href="#" class="list-group-item">Item 3.3.3</a>
    </div>

  </div>

</div>

CSS

.just-padding {
  padding: 15px;
}

.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
}

.list-group.list-group-root .list-group {
  margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 45px;
}

.list-group-item .glyphicon {
  margin-right: 5px;
}

Javascript

$(function() {
    
  $('.list-group-item').on('click', function() {
    $('.fas', this)
      .toggleClass('fa-angle-right')
      .toggleClass('fa-angle-down');
  });

});

Solution 5 - Html

One way

<div class="container">
<div class="row">
    <div class="col-xs-12">
        <ul class="list-group">
            <li class="list-group-item">One</li>
            <li class="list-group-item">Two
                <ul class="list-group inner">
                    <li class="list-group-item">Item 2a</li>
                    <li class="list-group-item">Item 2b</li>
                </ul>
            </li>
            <li class="list-group-item">Three
                <ul class="list-group inner">
                    <li class="list-group-item">Item 3a</li>
                    <li class="list-group-item">Item 3b</li>
                </ul>
            </li>
        </ul>
    </div>
</div>


<style>
.list-group.inner li{
 border:none;

}
</style>

https://jsfiddle.net/7o8rp0kv/3/

Solution 6 - Html

I wanted something simpler without custom CSS and Nesting. The use of Margins works well for indenting.

Make note of ml-4 for margin below. The code indenting is actually not required as we are not creating a nested lines. Just indented for clarity.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <h6 class="text-muted">Links</h6> 
      <ul class="list-group">
        <li class="list-group-item"><i class="fas fa-user fa-lg text-info mx-2"></i><a href="/someuser">User List</a></li>
        <li class="list-group-item"><i class="fas fa-barcode fa-lg text-success mx-2"></i><a href="/someproduct">Products and Pricing</a></li>
        <li class="list-group-item"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i>Reference Tables</li>
            <li class="list-group-item ml-4"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i><a href="/testmaster">Reference Master</a></li>
            <li class="list-group-item ml-4"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i><a href="/testdetail">Reference Detail</a></li>
        <li class="list-group-item"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i>Reference Define Fields</li>
            <li class="list-group-item ml-4"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i><a href="/testdfmaster">Reference Define Fields Master</a></li>
            <li class="list-group-item ml-4"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i><a href="/testdfdetail">Reference Define Fields Detail</a></li>
        <li class="list-group-item"><i class="fas fa-drafting-compass fa-lg text-warning mx-2"></i><a href="/anothermaster">Template</a></li>
      </ul>
    </div>
  </div>
</div>

Solution 7 - Html

The update provided by Beengie for Bootstrap 4 worked for me in Bootstrap 5 with a small tweak.

Need to change

data-toggle="collapse"

to

data-bs-toggle="collapse"
Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Twitter Bootstrap Solutions
Recommended Twitter Bootstrap-3 Solutions
Recommended Nested Lists Solutions

Previous Solution:

Getting Cannot read property 'offsetWidth' of undefined with bootstrap carousel script

JavascriptJqueryTwitter Bootstrap

Next Solution:

Splitting List into sublists along elements

JavaListJava 8Collectors

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser3594595View Question on Stackoverflow
Solution 1 - HtmlMarcosView Answer on Stackoverflow
Solution 2 - HtmlÓscar Gómez AlcañizView Answer on Stackoverflow
Solution 3 - HtmlApollo3zehnView Answer on Stackoverflow
Solution 4 - HtmlBeengieView Answer on Stackoverflow
Solution 5 - HtmlRohit BandooniView Answer on Stackoverflow
Solution 6 - HtmlSenthilView Answer on Stackoverflow
Solution 7 - HtmlBryan MasepholView Answer on Stackoverflow