Mouss Mouss - 6 days ago 5
CSS Question

Overwrite bootstrap div's padding

I am using bootstrap I have 2 divs, one div contains label and the other contain input :

<div class="form-group">
<div class="col-sm-3 float-left div1">
<label class="control-label">Label</label>
</div>
<div class="col-sm-9 float-left div2">
<input class="form-control">
</div>
</div>


The 2 divs have side padding because of bootstrap col-sm-XX, so the space between each field is 30px (15px for col-sm-3 and 15px col-sm-9).

My issue is that I want to keep the space between the 2 fields, but the background color of the first div to be right next to the input.

Actually I have this : enter image description here

And what I want would be this : enter image description here

And to keep the 30px spacing between label and input. I have plunkered my issue.

Answer

You just need to add 30px padding to the right of div1 and set the the left padding of div2 to 0 see your Edited Plucker.

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
/* Styles go here */
.float-left {
  float: left;
}
.div1 {
  background: red;
  padding-right: 30px;
}
.div2 {
  // background: blue;
  padding-left: 0;
}
   <div class="form-group">
      <div class="col-sm-3 float-left div1">
        <label class="control-label">Label</label>
      </div>
      <div class="col-sm-9 float-left div2">
        <input class="form-control">
      </div>
    </div>

Comments