Menu
I have following HTML code:
<div class="col-sm-4">
<div class="form-group" class="form-inline">
<span style="white-space: nowrap">
<label for="size">Board size:</label>
<select class="form-control" id="size" style="background-color: black; color: silver">
<option>small</option>
<option>medium</option>
<option>large</option>
<option>huge</option>
</select>
</span>
</div>
</div>
What I want to achieve is to have select form and its label in same line. I tried applying solutions from similiar question from stackoverflow. Span with white-space: nowrap doesn't work, neither do class="form-inline" or answer from this question :Keep buttons and form with select dropdown on same row in Bootstrap 3 How can I solve it?
456
Here is one way :
Bootply : http://www.bootply.com/YzaMGyRq99
CSS :
select.form-control{display:inline-block}
HTML :
<div class="col-sm-4">
<div class="form-group">
<span style="white-space: nowrap">
<label for="size">Board size:</label>
<select class="form-control" id="size" style="background-color: black; color: silver">
<option>small</option>
<option>medium</option>
<option>large</option>
<option>huge</option>
</select>
</span>
</div>
</div>
You want this
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label for="size">Board size:</label>
<select class="form-control" id="size" style="background-color: black; color: silver">
<option>small</option>
<option>medium</option>
<option>large</option>
<option>huge</option>
</select>
</div>
</form>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
