csslistitemthickness

Changing 'thickness' of bootstrap list-group-item

I want to reduce how thick the list-group-item are, whilst keeping the title text fitting.

<ul class="list-group"> 
  <a href="#id" class="list-group-item list-group-item-info" data-toggle="collapse">Title</a>
</ul>

.list-group-item {
  height: 10px;
}

This successfully reduces the thickness, but the Title text remains too big. I suspect height is the wrong property to use?

text too big

Solution

  • The size is controlled by this class

    .list-group-item {
    position: relative;
    display: block;
    padding: 0px 15px; /* adjust here */
    margin-bottom: -1px;
    border: 1px solid #ddd;
    line-height: 1em /* set to text height */
}

    Codepen Demo