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

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

  
  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
    
    
  
  

  

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

---

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

  
  
    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
    
    
  
  

  

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