Bootstrap 3: decreasing height of list-group in list group
I want to decrease the height of the list-group-item.
<ul class="list-group" style="max-height: 200px;overflow: auto;">
<li class="list-group-item" ng-repeat="i in filters">
{{i}}
</li>
</ul>
How can i do this? Should I add a custom css class?
Better solution is to update bootstrap.css as shown in Peter Wooster, here: Bootstrap: CSS - list-list item height . To change the height of a list box item, update the height property. If you've set the height to a value other than the default, you'll probably want to change the padding vertical offset as well.
An alternative to updating CSS is to include a style attribute on every li> or <a> tag that contains a list-list item. Here are the defaults:
<li class="list-group-item" style="height: 40px; padding: 10px 15px;">
If you want to reduce the size of the boxes, try:
<li class="list-group-item" style="height: 30px; padding: 5px 15px;">
Be aware that the word wrap misbehaves behaves differently when the height of the list item is fixed.
Just override the CSS styling style. Please keep in mind that you must insert the file after the loading CSS file.
/* Overrides list-group-item from Bootstrap */
.list-group-item {
padding: 3px 10px
}