How to make a responsive bootstrap table inline? - html

Question

How can I make a span display inline with a bootstrap responsive table? Currently the span displays on a new line. I'd like the span to be to the right of the table, vertically centered with the table header.
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">Sibling(s)</h3></div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Gender</th>
<th>Name</th>
<th>Birthdate</th>
<th>School</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control" name="sibling-gender1" id="sibling-gender1">
<option></option>
<option>M</option>
<option>F</option>
</select>
</td>
<td>
<input class="form-control" name="sibiling-name1" id="sibiling-name1" style="width: 100%;"/>
</td>
<td>
<input class="form-control" name="sibling-birthdate1" id="sibling-birthdate1" placeholder="MM-DD-YYYY"
style="width: 100%;"/>
</td>
<td>
<input class="form-control" name="sibling-school1" id="sibling-school1" style="width: 100%;"/>
</td>
<td>
<select class="form-control" name="sibling-grade1" id="sibling-grade1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<span class="glyphicon glyphicon-plus"></span>
<!-- end .form-group -->
</div>
<!-- end .panel-body -->
</div>
<!-- end .panel -->

Answer 1

You could change the display property of the .table-responsive/span elements to table-cell. Just give .table-responsive a width of 100% in order to fill the remaining space. Additionally, you might also need to add padding to the span element.
EXAMPLE HERE
.table-responsive {
display:table-cell;
width:100%;
}
.table-responsive + .glyphicon.glyphicon-plus {
display:table-cell;
padding-left:10px;
}
If you want the span element to be aligned in the middle, all you would have to do is add vertical-align:middle to the element.
EXAMPLE HERE
.table-responsive + .glyphicon.glyphicon-plus {
display:table-cell;
padding-left:10px;
vertical-align:middle;
}
It's worth noting that this CSS assumes that the element are adjacent siblings. If they aren't, you would need to change the selectors.

Answer 2

A Bootstrap way could be to make the .panel-body a .row too and its children (.table-responsive, .glyphicon) become columns:
<div class="panel-body row">
<div class="col-xs-11 table-responsive "></div>
<span class="col-xs-1 glyphicon glyphicon-plus"></span>
</div>
The vertical center of the table header cannot be determined through CSS (as it is just one part of the left columns height), but you can adjust the top-paddings of the table header cells and the icon.