My grid created using bootstrap 3 divs consists of a button, followed by a radio button, and then another button. I want to highlight these elements with a consistent background color that stretches across like a single row.
Check out my attempt on this fiddle - https://jsfiddle.net/oxfqvtds/2/
In the current setup, there is excess white space at the bottom right of the div which affects the uniformity of the highlighting.
.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>https://i.stack.imgur.com/Pgf5x.png
I'd also like for the buttons and radio buttons to be vertically centered within the highlighted area, as they currently appear towards the top.