Indents in nested lists in HTML / CSS - html

Question

I've started using Twitter Bootstrap, which is useful for me (as a programmer) to get a decent looking site without having to write much CSS.
However something is driving me crazy. I have a nested list like
<ul>
<li>Hello</li>
<li>World
<ul>
<li>Wide</li>
<li>Web</li>
</ul>
</li>
</ul>
But the first and second level of this list are NOT getting indented differently (ie. they align with each other on the left)
In normal html nested lists, deeper sublists indent more. But something in the style sheet must be turning this off. How do I find what controls this? I can't see a CSS "list indent" attribute for li elements in any documentation.

Answer 1

Just use Firebug in FF or Chrome dev-tools: right-click on your target and select inspect element. You can visually and textually inspect the CSS properties to see what's causing the collapse.
You probably want a rule like
ul > li {
margin-left: 10px;
}

Answer 2

Just to add to the answers above: padding-left will indent the words, but not the bullet point, while margin-left will indent the bullet point as well.
Example: http://jsfiddle.net/GMLxv/

Answer 3

I had the same problem as you.
There's a rule in type.less that cancels the indentation for lists:
ul, ol {
padding: 0;
margin: 0 0 #baseLineHeight / 2 25px;
}
I ended up overriding this rule:
ul, ol {
padding: 0px 25px;
}
Indentation in nested lists is now back.

Answer 4

You're looking to set padding-left:
li { padding-left: 1em; }
will indent every li 1em. Since the inner lis are already offset from the outer lis, it should do what you want.

Answer 5

Is it perhaps that you have set your bullets points to be inside the list items instead of before it, which would change your look quite significantly.
The CSS to apply it: ul { list-style-position: inside; }
Read more about list-style-position.
Example : https://jsfiddle.net/g0k0obwh/

Answer 6

You wouldn't want to apply the padding onto the li elements since that would create a padding between the bullet and the list if you are using a bulleted list. See:
ul > li {
padding-left:25px;
}
result:
- Hello
- World
- Wide
- Web
Neither would you want to apply it to the parent ul elements with ul { padding-left:25px;} which would give:
- Hello
- World
- Wide
- Web
The answer to your question is:
li > ul {
padding-left:25px;
}
result:
- Hello
- World
- Wide
- Web

Answer 7

Using Bootstrap you could do that by coding as follows. Just paste it your JSP or HTML and test it. You could go through this link for more information.
http://www.bootply.com/DglnYJTSKA
<div id="MainMenu">
<div class="list-group panel">
Item 3
<div class="collapse" id="demo3">
Subitem 1 <i class="fa fa-caret-down"></i>
<div class="collapse list-group-submenu" id="SubMenu1">
Subitem 1 a
Subitem 2 b
Subitem 3 c <i class="fa fa-caret-down"></i>
<div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1">
Sub sub item 1
Sub sub item 2
</div>
Subitem 4 d
</div>
Subitem 2
Subitem 3
</div>
Item 4
<div class="collapse" id="demo4">
Subitem 1
Subitem 2
Subitem 3
</div>
Item 5
<div class="collapse" id="demo5">
Subitem 1
Subitem 2
Subitem 3
</div>
</div>
</div>
CSS:
.list-group.panel > .list-group-item {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.list-group-submenu {
margin-left:20px;
}