title: Bootstrap: Space between list group and Header on To-Do list?
body: <p>Im having a bit of trouble in getting rid of a gap inbetween my list-group in bootstrap, and a header I have (with a button that can control the text-field input for adding items)</p>
  
  <p><a href="https://jsfiddle.net/wvwt5p4y/" rel="nofollow noreferrer">https://jsfiddle.net/wvwt5p4y/</a></p>
  
  <p>Associated HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
    &lt;div class="list-container"&gt;
      &lt;div class="card card-inverse card-primary mb-3 text-left"&gt;
    &lt;div class="card-block"&gt;
      TO-DO LIST
    &lt;i class="fa fa-plus fa-2x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt; 
    &lt;/div&gt;
    &lt;ul class="list-group main-list"&gt;
      &lt;div class="form-group"&gt;
        &lt;div id="text-append"&gt;
          &lt;input class="form-control" type="text" value="" id="text-input" placeholder="Add New Task"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried adjusting the margins and padding to 0 and both (top and bottom) but it still seems to have a gap in the middle. Any ideas? I could try not using bootstrap but it seems like i've had better success in making things look half-way decent with it.</p>
  
  <p>as a sidenote i've added a strikethrough on click on the list items...but it's EXTREMELY slow (like takes 2+ seconds to work...but maybe that's a separate question).</p>
  
  <p>Thanks!</p>