CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5102460
user5102460

Reputation:

Bootstrap: Form display

I like bootstrap, but when it comes to forms it's really inconvenient. I made myself classes for a comment box that should flowing on the top and (ideally push other elements below on smartphone screens). I couldn't figure out how to have the name and surname on the same line. I've made following demo:

.comment-box-container {
  position: absolute;
  top: 812px;
  right: 40px;
  z-index: 1001;
  width: 500px;
  padding-top: 0px;
  margin-top: 0px;
}
.comment-box {
  background-color: white;
  border: 1px solid #DCE0E0;
  padding: 10px;
}
.comment-box-header {
  background-color: rgba(38, 173, 228, 0.9);
  color: white;
  height: 40px;
  padding: 5px;
  padding-left: 10px;
  font-size: 20px;
  text-transform: capitalize;
  font-weight: normal;
  margin-right: 0px;
  margin-left: 0px;
}
/* Remove rounded borders on input fields */

.form-control {
  border-radius: 0;
}
/* Disable the ability to resize textareas */

textarea {
  resize: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="comment-box-container">
  <div class="comment-box-header">
    Kontakt
  </div>
  <div class="comment-box">
    <form role="form" class="forminline">
      <div class="form-group">
        <input type="surname" class="form-control" placeholder="Vorname" id="surname">
      </div>
      <div class="form-group">
        <input type="name" class="form-control" placeholder="Name" id="name">
      </div>
      <div class="form-group">
        <input type="telephone" class="form-control" placeholder="Telefon" id="telephone">
      </div>
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Email" id="email">
      </div>
      <div class="form-group">
        <textarea class="form-control" id="comments" name="comments" placeholder="Nachricht" rows="5"></textarea>
      </div>
      <div class="form-group">
        <button class="btn" type="submit">Interesse bekunden</button>
      </div>
    </form>
  </div>
</div>

I'd like to display surname and name on the same line and the button in the center over the whole width. Possible? (P.S. What kind of buttons is Stack Overflow using below?)

Upvotes: 1

Views: 259

Answers (1)

m4n0
m4n0

Reputation: 32275

JSfiddle demo

  1. You need to add grid classes to the first two inputs. col-xs-6 will divide the inputs by giving them a width of 50% and align them in a line. Make sure you have wrapped the two inputs inside a row so that next inputs are aligned as it is, without disturbing the flow.

  2. text-center class to the commentbox class will align the button to center.

  3. To reduce the space between the two input box, you will need to override the padding-left to 0. Note that I am targeting the second input so that only the spacing is effected.

    .comment-box .form-group.col-xs-6:nth-child(2) {
  padding-left: 0;
}

  4. To give a custom color to the button, you will again need to override the bootstrap classes.

    .comment-box .btn {
   background-color: lightgray;
}


.comment-box-container {
  position: absolute;
  top: 10px;
  right: 40px;
  z-index: 1001;
  width: 500px;
  padding-top: 0px;
  margin-top: 0px;
}
.comment-box {
  background-color: white;
  border: 1px solid #DCE0E0;
  padding: 10px;
}
.comment-box-header {
  background-color: rgba(38, 173, 228, 0.9);
  color: white;
  height: 40px;
  padding: 5px;
  padding-left: 10px;
  font-size: 20px;
  text-transform: capitalize;
  font-weight: normal;
  margin-right: 0px;
  margin-left: 0px;
}
/* Remove rounded borders on input fields */

.form-control {
  border-radius: 0;
}
/* Disable the ability to resize textareas */

textarea {
  resize: none;
}

.comment-box .form-group.col-xs-6:nth-child(2) {
  padding-left: 0;
}

.comment-box .btn {
   background-color: lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="comment-box-container">
  <div class="comment-box-header">
    Kontakt
  </div>
  <div class="comment-box text-center">
    <form role="form" class="forminline">
      <div class="row">
        <div class="form-group col-xs-6">
          <input type="surname" class="form-control" placeholder="Vorname" id="surname">
        </div>
        <div class="form-group col-xs-6">
          <input type="name" class="form-control" placeholder="Name" id="name">
        </div>
      </div>
      <div class="form-group">
        <input type="telephone" class="form-control" placeholder="Telefon" id="telephone">
      </div>
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Email" id="email">
      </div>
      <div class="form-group">
        <textarea class="form-control" id="comments" name="comments" placeholder="Nachricht" rows="5"></textarea>
      </div>
      <div class="form-group">
        <button class="btn" type="submit">Interesse bekunden</button>
      </div>
    </form>
  </div>
</div>

Upvotes: 2

Related Questions