Clever Geek Handbook

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? enter image description here

+3


source to share


2 answers


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.

+3


source


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
}
+3


source






More articles:


All Articles