CODEWITHSUNDEEP
htmlcssbootstrap-4
HJ1990
HJ1990

Reputation: 415

How to reduce spacing in list-groups for Bootstrap 4

I have a list-group but I would like to reduce the line height between each of the list-group-items. I tried the following below but the format for the last li is off since the margin-bottom does not get applied.

CSS

 .list-group-item{
        margin-bottom: -6px;
        margin-top: -6px;  
    }

HTML

 <ul class="list-group ml-3 mr-3 mt-1 sidebar-list-items ">
            <li  class="list-group-item d-flex p-0 border-0" >
                <input  class="my-auto ml-2" type="checkbox" id="CheckBox1" />
                <label style="font-size: 13px;"class="mt-2 ml-2 w-100 " for="CheckBox1">Acupunture</label>
            </li>
            <li class="list-group-item d-flex p-0 border-0">
                <input class="my-auto ml-2" type="checkbox" id="CheckBox2" />
                <label style="font-size: 13px" class=" mt-2 ml-2 w-100" for="CheckBox2">Ayurveda </label>
            </li>
            <li class="list-group-item d-flex p-0 border-0 ">
                <input class="my-auto ml-2" type="checkbox" id="CheckBox3" />
                <label style="font-size: 13px" class="mt-2  ml-2 w-100" for="CheckBox3">Homeopathy</label>
            </li>
        </ul>

Upvotes: 0

Views: 5064

Answers (1)

Kostas Minaidis
Kostas Minaidis

Reputation: 5516

You can try replacing the my-auto with another margin-x setting on the input and label elements as follows:

<ul class="list-group ml-3 mr-3 mt-1 sidebar-list-items ">
  <li  class="list-group-item d-flex p-0 border-0" >
    <input  class="ml-2 my-0" type="checkbox" id="CheckBox1" />
    <label style="font-size: 13px;"class="my-0 ml-2 w-100 " for="CheckBox1">Acupunture</label>
  </li>
  <li class="list-group-item d-flex p-0 border-0">
    <input class="my-0 ml-2" type="checkbox" id="CheckBox2" />
    <label style="font-size: 13px" class=" my-0 ml-2 w-100" for="CheckBox2">Ayurveda </label>
  </li>
  <li class="list-group-item d-flex p-0 border-0 ">
    <input class="my-0 ml-2" type="checkbox" id="CheckBox3" />
    <label style="font-size: 13px" class="my-0 ml-2 w-100" for="CheckBox3">Homeopathy</label>
  </li>
</ul>

You can try one of the my-0, my-1, ..., up to my-5 helper classes.

Upvotes: 2

Related Questions