Bootstrap 3 show shortcut in inline selectbox
I am setting a shortcut for a select menu in bootstrap 3 like this:
<div class="col-lg-2">
<label>Filter</label>
<select class="form-control" name="sort">
<option value="1">1</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
in the output as a shortcut at the top of the window select menu:
I need to show a shortcut in the select menu bar like this:
how to show a label in a string ?!
DEMO JSFIDDLE
+4
source to share
3 answers
You need to put your shortcut and your selection inside a "group", so we have this:
<div class="form-group">
<label for="sort" class="col-sm-2 control-label"> Filter </label>
<div class="col-sm-10">
<select class="form-control" name="sort" id="sort">
<option value="1">1</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
</div>
+10
source to share
Do you want the "inline in the form"
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="dashboard-filter">Filter By</label>
<select id="dashboard-filter" class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
0
source to share
You want form-inline
- this example works in full screen mode (not sure why this piece of code carries over when not in full screen mode), but it should work the way you want.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="dashboard-filter">Filter By</label>
<select id="dashboard-filter" class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
The docs are here: https://getbootstrap.com/docs/3.4/css/#forms-inline
0
source to share