CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Eric Favoni
Eric Favoni

Reputation: 183

bootstrap 3 show label in inline selectbox

I set label for select box 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 output in see label in top of select box menu: enter image description here

I need to show label inline of select box menu like this :

enter image description here

how do show label in inline ?!

DEMO JSFIDDLE

Upvotes: 8

Views: 32730

Answers (2)

danday74
danday74

Reputation: 57166

You want form-inline - This example works in full screen mode (not sure why this code snippet wraps when not in full screen mode) but give it a whirl it should work for you.

<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>

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

Upvotes: 0

Zanoldor
Zanoldor

Reputation: 388

You need put your label and your select inside of 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>

Upvotes: 12

Related Questions