Form template

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <form class="form-horizontal">
    <div class="form-group">
      <label for="first-name" class="col-sm-6 control-label">First name</label>
      <div class="col-sm-6">
        <input type="text" name="first-name" class="form-control" placeholder="">
      </div>
    </div>
    <div class="form-group">
      <label for="last-name" class="col-sm-6 control-label">Last name</label>
      <div class="col-sm-6">
        <input type="text" name="last-name" class="form-control" placeholder="">
      </div>
    </div>
    <div class="form-group">
      <label for="nature-inquiry" class="col-sm-6 control-label">Nature of inquiry</label>
      <div class="col-sm-6">
        <select class="form-control" name="nature-inquiry">
          <option>Select one</option>
          <option value="Feedback">Feedback</option>
          <option value="Support">Support</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="email" class="col-sm-6 control-label">Email</label>
      <div class="col-sm-6">
        <input type="email" name="email" class="form-control" placeholder="">
      </div>
    </div>
    <div class="form-group">
      <label for="inquiry" class="col-sm-6 control-label">inquiry</label>
      <div class="col-sm-6">
        <textarea class="form-control" name="inquiry" id="inquiry1" rows="3"></textarea>
      </div>
    </div>
    <div class="form-group">
      <label for="image-upload" class="col-sm-6 control-label">Image Upload</label>
      <div class="col-sm-6">
        <input type="file" name="image-upload" class="form-control">
      </div>
    </div>
    <hr class="hr-normal">
    <div class="form-btns">
      <button type="submit" class="btn btn-primary pull-right">Submit</button>
      <button type="reset" class="btn btn-secondary pull-right">Clear</button>
    </div>
  </form>
</div>

CSS

.btn-primary,
.btn-secondary {
  display: block;
  clear: both;
  width: 100%;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border: none;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}

.btn-primary:focus,
.btn-primary:hover,
.btn-secondary:focus,
.btn-secondary:hover,
.btn:active:focus {
  outline: none;
}

@media (min-width:640px) {
  .btn-primary {
    clear: none;
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
  .btn-secondary {
    clear: none;
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
}

.form-btns button + button {
  margin-top: 10px;
}

.form-control {
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  box-shadow: none;
  background-color: #fbfbfb;
  height: 43px;
}

@media screen and (min-width: 640px) {
  .control-label {
    padding-top: 12px !important;
  }
  .form-btns button + button {
    margin-top: 0px;
    margin-right: 10px;
  }
}