CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
msmith1114
msmith1114

Reputation: 3231

Bootstrap: Space between list group and Header on To-Do list?

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)

https://jsfiddle.net/wvwt5p4y/

Associated HTML:

<div class="container-fluid">

  <div class="list-container">
    <div class="card card-inverse card-primary mb-3 text-left">
  <div class="card-block">
    TO-DO LIST
  <i class="fa fa-plus fa-2x" aria-hidden="true"></i></div> 
  </div>
  <ul class="list-group main-list">
    <div class="form-group">
      <div id="text-append">
        <input class="form-control" type="text" value="" id="text-input" placeholder="Add New Task">
      </div>
    </div>
  </ul>
</div>

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.

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).

Thanks!

Upvotes: 0

Views: 1757

Answers (1)

LKG
LKG

Reputation: 4192

just remove mb-3 to below html part

<div class="card card-inverse card-primary mb-3 text-left">

Here is working fiddle

body {
  background: #007991;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #78ffd6, #007991);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #78ffd6, #007991);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

li {
  font-weight: bold;
}


.list-container {
  margin: 100px auto;
  width: 365px;
}

.btn-danger {
  margin-right: 20px;
}



.card-block {
  font-size: 26px;
  font-weight: bold;
  color: white;
}

.fa-plus {
  float: right;
}

#header-text {
  float: left;
}

#text-input {
  display: none;
}

.list-mark {
  text-decoration: line-through;
  color: grey;
}
<div class="container-fluid">
  
  <div class="list-container">
    <div class="card card-inverse card-primary text-left">
  <div class="card-block">
    TO-DO LIST
  <i class="fa fa-plus fa-2x" aria-hidden="true"></i></div> 
  </div>
  <ul class="list-group main-list">
    <div class="form-group">
      <div id="text-append">
        <input class="form-control" type="text" value="" id="text-input" placeholder="Add New Task">
      </div>
    </div>
  </ul>
</div>
  
</div>

Upvotes: 2

Related Questions