<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-12"> <legend>Mr. Sosa:</legend> </div> <!-- panel preview --> <div class="col-sm-12"> <h4>Add payment:</h4> <div class="panel panel-default"> <div class="panel-body form-horizontal payment-form"> <div class="form-group"> <label for="concept" class="col-sm-3 control-label">Concept</label> <div class="col-sm-9"> <input type="text" class="form-control" id="concept" name="concept"> </div> </div> <div class="form-group"> <label for="description" class="col-sm-3 control-label">Description</label> <div class="col-sm-9"> <input type="text" class="form-control" id="description" name="description"> </div> </div> <div class="form-group"> <label for="amount" class="col-sm-3 control-label">Amount</label> <div class="col-sm-9"> <input type="number" class="form-control" id="amount" name="amount"> </div> </div> <div class="form-group"> <label for="status" class="col-sm-3 control-label">Status</label> <div class="col-sm-9"> <select class="form-control" id="status" name="status"> <option>Paid</option> <option>Unpaid</option> </select> </div> </div> <div class="form-group"> <label for="date" class="col-sm-3 control-label">Date</label> <div class="col-sm-9"> <input type="date" class="form-control" id="date" name="date"> </div> </div> <div class="form-group"> <div class="col-sm-12 text-right"> <button type="button" class="btn btn-default preview-add-button"> <span class="glyphicon glyphicon-plus"></span> Add </button> </div> </div> </div> </div> </div> <!-- / panel preview --> </div> </div> </div>