Bootstrap 3: Reduce height of list-group-item in list-group

Question

I want to reduce height of 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? Should I add custom css class?

Answer 1

If you are using bootstrap 4 then solution is easy, no need to write any new class.

We can use py-0/py-1/py-2/py-3/py-4 class according to your need with LI element:

<ul class="list-group">     <li class="list-group-item py-2" ng-repeat="i in filters">         {{i}}     </li> </ul> 

Where property is one of:

• m - margin
• p - padding

Where sides is one of:

• t - top
• b - bottom
• l - left
• r - right
• x - left & right
• y - top & bottom

Where Number is one of:

• 1: .25rem = 4px
• 2: .50rem = 8px
• 3: .75rem = 12px
• 4: 1rem = 16px