CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
kayasa
kayasa

Reputation: 2085

Set background color for div

I have a grid created using bootstrap 3 divs. The collection of divs has 1 button, followed by a radio button, followed by another button. I would like to highlight these with a background color. The background color should not break in between and should be like a single row.

Here is the fiddle with my attempt - https://jsfiddle.net/oxfqvtds/2/

In this, there is some empty space on the bottom right side of the div. As a result, the highlighting is not consistent. 

.highlight {
  background-color: yellow;
}

.input-field {
  height: 20px;
  padding: 2px 10px;
}

.custom-label {
  line-height: 3.3em !important;
}

.label-size {
  font-size: 10px;
  line-height: 2.1em;
}

label {
  padding-right: 0px;
}
<head>
  <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
  <div class="container-fluid">

    <form class="form-horizontal">
      <div class="col-md-12">...</div>
      <div class="col-md-12">...</div> 
      <div class="col-md-10  highlight">
        <div class="form-group">
          <div class="col-md-3">
            <button class="btn btn-primary btn-xs" type="button">Test</button>

          </div>

          <label class="col-md-2 label-size">Options</label>

          <div class="radio" class="col-md-7 label-size">
            <label class="label-size">
            <input type="radio" name="opt" value="opt" >opt</label>

          </div>
        </div>
      </div>
      <div class="col-md-2 highlight form-group">

        <button class="btn btn-info btn-xs pull-right">Test2</button>

      </div>
    </form>
  </div>
</body>

Highlighting

Also, would like to have the buttons/radio buttons centered in the highlighted area. Right now they seem to be towards the top of the highlighted area.

Upvotes: 0

Views: 2969

Answers (2)

Sensoray
Sensoray

Reputation: 2420

With bootstrap you columns should be in a row. Apply the background color to the row once you have it in place. Remove form-groups, and you had class listed twice around the radio element so it wasn't reading the bootstrap column class.

.highlight.row {
  background-color: yellow;  
  margin:0;
}

.input-field {
  height: 20px;
  padding: 2px 10px;
}

.custom-label {
  line-height: 3.3em !important;
}

.label-size {
  font-size: 10px;
  line-height: 2.1em;
}

label {
  padding-right: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row highlight">
  <form class="form-horizontal">

    <div class="col-md-10  ">
      <div class="">
        <div class="col-md-3">
          <button class="btn btn-primary btn-xs" type="button">Test</button>

        </div>
        <div class="col-md-2">
        <label class="label-size">Options</label>
        </div>
        
        

        <div class="col-md-5 label-size">
          <label class="label-size">
            <input type="radio" name="opt" value="opt" >opt</label>

        </div>
      </div>
    </div>
    <div class="col-md-2">

      <button class="btn btn-info btn-xs pull-right">Test2</button>

    </div>
  </form>
  </div>
</div>

Upvotes: 1

Rafael
Rafael

Reputation: 5119

remove the margin-bottom from this particular form-group

Upvotes: 0

Related Questions