How to fix these buttons?

<form class="form"> <div class="row"> <div class="col-md-1"> <div class="form-group"> <label>ID</label> <input type="text" class="form-control"> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Description</label> <input type="text" class="form-control"> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Amount</label> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-addon">-</div> <input type="text" class="form-control"> </div> </div> </div> <div class="col-md-1"> <div class="form-group"> <label>Status</label> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label>Date</label> <div class="input-group"> <input data-provide="datepicker" class="form-control"> <div class="input-group-addon">-</div> <input data-provide="datepicker" class="form-control"> </div> </div> </div> <div class="col-md-2"> <div class="form-group"> <button type="submit" class="btn btn-default">Apply</button> <button type="submit" class="btn btn-default">Reset</button> </div> </div> </div> </form>

enter image description here

Closed due to the fact that off-topic participants VenZell , aleksandr barakin , zRrr , user194374, Dmitriy Simushev 27 Mar '16 at 18:03 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - VenZell, aleksandr barakin, zRrr, Community Spirit, Dmitriy Simushev
If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    The input lowercase, and the div tag in which they are placed is blocky, lowercase elements do not occupy the entire space in the div , but are pressed against the upper border of the div , so I inserted the label tag, but hidden it from my eyes, the css property is the visibitity:hidden .

      <form class="form"> <div class="row"> <div class="col-md-1"> <div class="form-group"> <label>ID</label> <input type="text" class="form-control"> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Description</label> <input type="text" class="form-control"> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Amount</label> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-addon">-</div> <input type="text" class="form-control"> </div> </div> </div> <div class="col-md-1"> <div class="form-group"> <label>Status</label> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label>Date</label> <div class="input-group"> <input data-provide="datepicker" class="form-control"> <div class="input-group-addon">-</div> <input data-provide="datepicker" class="form-control"> </div> </div> </div> <div class="col-md-2"> <label style="visibility:hidden">Status</label> <div class="form-group"> <button type="submit" class="btn btn-default">Apply</button> <button type="submit" class="btn btn-default">Reset</button> </div> </div> </div> </form>