title: Consistent Styling for Nested Lists with Bootstrap
body: <p>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 <a href="https://jsfiddle.net/7o8rp0kv/1/" rel="noreferrer">this</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/RkgsL.png" alt="Nested lists with bootstrap"></p>
  
  <pre><code>&lt;ul class="list-group"&gt;
      &lt;li class="list-group-item"&gt;One&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Two
          &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item"&gt;Item 2a&lt;/li&gt;
              &lt;li class="list-group-item"&gt;Item 2b&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="list-group-item"&gt;Three
          &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item"&gt;Item 3a&lt;/li&gt;
              &lt;li class="list-group-item"&gt;Item 3b&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How can I make these nested lists appear like this (or in some similar way): </p>
  
  <p><img src="https://i.stack.imgur.com/4ZNKL.png" alt="What nested lists should look like"></p>
  
  <p>In case you missed the link above, here is the JSFiddle: <a href="https://jsfiddle.net/7o8rp0kv/1/" rel="noreferrer">https://jsfiddle.net/7o8rp0kv/1/</a></p>