CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
kramer65
kramer65

Reputation: 54033

How to place Bootstrap form inputs closer to eachother?

I'm building a form using Bootstrap in which I need to place many inputs on one line like if it where a Spreadsheet. So using the regular Bootstrap grid system I did this (snippet):

<div class="col-sm-1">
    <div class="form-group">
        <textarea placeholder="Description" class="form-control" rows="1" required></textarea>
    </div>
</div>
<div class="col-sm-1">
    <input placeholder="Remaining contract term" class="form-control" type="text">
</div>
<div class="col-sm-1">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">€</div>
            <input placeholder="Contract rental" class="form-control" type="text">
        </div>
    </div>
</div>
etc.

which results in:

enter image description here

Obviously that looks horrible. For this specific form I need to place the inputs closer to eachother so that they (almost) touch eachother.

Does anybody know how I can style this better? All tips are welcome!

Upvotes: 0

Views: 1022

Answers (2)

vanburen
vanburen

Reputation: 21663

This might be useful.

You can adjust your column padding by media queries in the event you want the form to stack on smaller devices so the padding returns to normal.

@media (min-width: 768px) {
  form .form-gutter >[class*='col-'] {
    padding-right: 1px;
    padding-left: 1px;
  }
}
form .form-control,
form .input-group-addon {
  border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form">
  <div class="container-fluid">
    <h1>Form </h1>

    <div class="row form-gutter">
      <div class="col-sm-2">
        <div class="form-group">
          <div class="input-group">
            <input placeholder="Contract rental" class="form-control" type="text">
            <div class="input-group-addon">€</div>
          </div>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="form-group">
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">Some</label>
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">Thing</label>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="form-group">
          <input placeholder="Remaining contract term" class="form-control" type="text">
        </div>
      </div>
      <div class="col-sm-2">
        <div class="form-group">
          <input placeholder="Remaining contract term" class="form-control" type="text">
        </div>
      </div>
      <div class="col-sm-2">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon">€</div>
            <input placeholder="Contract rental" class="form-control" type="text">
          </div>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon">€</div>
            <input placeholder="Contract rental" class="form-control" type="text">
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Upvotes: 0

Wamadahama
Wamadahama

Reputation: 1668

You could override the padding on the col-sm-* with a class like this 

    .inputItem {
          padding-left: 2px;
          padding-right: 2px;
    }

Upvotes: 1

Related Questions