Consistent Styling for Nested Lists with Bootstrap

Question

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)? B

Answer 1

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

  


    
      Item 1
    
    


    
      Item 1.1
    
    

      Item 1.1.1
      Item 1.1.2
      Item 1.1.3
    

    
      Item 1.2
    
    

      Item 1.2.1
      Item 1.2.2
     Item 1.2.3
    

    
      Item 1.3
    
    

      Item 1.3.1
      Item 1.3.2
      Item 1.3.3
    

  

  
    Item 2
  
  


    
      Item 2.1
    
    

      Item 2.1.1
      Item 2.1.2
      Item 2.1.3
    

    
      Item 2.2
    
    

      Item 2.2.1
      Item 2.2.2
      Item 2.2.3
    

    
      Item 2.3
    
    

      Item 2.3.1
      Item 2.3.2
      Item 2.3.3
    
  

  
    Item 3
  
  


    
      Item 3.1
    
    

      Item 3.1.1
      Item 3.1.2
      Item 3.1.3
    

    
      Item 3.2
    
    

      Item 3.2.1
      Item 3.2.2
      Item 3.2.3
    

    
      Item 3.3
    
    

      Item 3.3.1
      Item 3.3.2
      Item 3.3.3
    

  

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');
  });

});