CODEWITHSUNDEEP
twitter-bootstrap
Dmytro
Dmytro

Reputation: 45

Indentation behaviour for Bootstrap input fields

I have form. Inside two inputs - Date and Time (with ids resDate and resTime respectively). I don't understand, why Bootstrap adds indentation for inputs? Why input fields aren't on the same level as radios and reserve button in this case? Code is here: http://codepen.io/socialodima/pen/zZrNMB

<input type="text" class="form-control" id="resDate" name="resDate" placeholder="Date">
<input type="text" class="form-control" id="resTime" name="resTime" placeholder="Time">

Upvotes: 0

Views: 1815

Answers (2)

Andrew Serie
Andrew Serie

Reputation: 19

Your col-sm-4 class is adding padding to the right and left of the field. You can use CSS to override it or make another class or id for that field and specify 0px on padding-left.

.col-sm-4 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

You should use a new class or ID for this though.

SolutionImage

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

That's because all the col-* values has a CSS property padding-left:15px and padding-right:15px. The parent div.col-sm-10 which is wrapping your inputs already has the above said paddings and above that the inputs are wrapped in one more div having class col-sm-4 which again adds more padding to the same. So I would suggest either write your own style to remove padding from div or keep them outside the div.col-sm-4 or you can remove the class assigned to the div. My suggestion would be to remove padding with extra CSS as below:

<div class="col-sm-10">
  <label class="control-label" for="resDate"></label>
  <div class="col-sm-4 no-pad">
    <input type="text" class="form-control" id="resDate" name="resDate" placeholder="Date">
    <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
  </div>
  <label class="control-label" for="resTime"></label>
  <div class="col-sm-4 col-sm-offset-1 no-pad">
    <input type="text" class="form-control" id="resTime" name="resTime" placeholder="Time">
    <span class="glyphicon glyphicon-time form-control-feedback"></span>
  </div>
</div>

CSS

.no-pad{
   padding:0px;
}

Note - I've added .no-pad class to the div.col-sm-4 which wraps inputs

Here's the Updated Pen

Upvotes: 1

Related Questions