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: enter image description here

I need to show a shortcut in the select menu bar like this:

enter image description here

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


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>
      

Run codeHide result


0


source


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>
      

Run codeHide result


The docs are here: https://getbootstrap.com/docs/3.4/css/#forms-inline

0


source







All Articles