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

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

  

    

      

        With collapse
      
      

      

        

          

            Level 1
          

          

            

              

                Level 2.1
              

              

                

                  Item 2.1.1
                
                

                  Item 2.1.2
                
                

                  Item 2.1.3
                
              
            

            

              

                Level 2.2
              
            
          
        
      
    

    

      

        Without collapse
      
      

      

        

          

            Level 1
          

          

            

              

                Level 2.1
              

              

                

                  Item 2.1.1
                
                

                  Item 2.1.2
                
                

                  Item 2.1.3
                
              
            

            

              

                Level 2.2