Changing 'thickness' of bootstrap list-group-item

Question

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

Tried that, the font size reduces but it remains in the wrong position. — user3722194, Sep 08 '15 at 10:19

score 2 · Accepted Answer · answered Sep 08 '15 at 10:18

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

score 1 · Answer 2 · answered Sep 08 '15 at 10:18

1

li tags have a default padding. You must to reset it to achieve it. The text have a line-height defined relative to his size. You must to define the line-height as equal as height.

  li {
    padding:0;
    height: 10px;
    line-height: 10px;
  }

answered Sep 08 '15 at 10:18

Marcos Pérez Gude

21,869
4
38
69

score 0 · Answer 3 · edited Sep 08 '15 at 11:52

0

don't do that instead use padding like this..

ul a {
padding:10px; // give padding
height:auto;
}

edited Sep 08 '15 at 11:52

MarmiK

5,639
6
40
49

answered Sep 08 '15 at 10:19

Sachin Kanungo

1,054
9
17

Changing 'thickness' of bootstrap list-group-item

3 Answers3