CODEWITHSUNDEEP
htmltwitter-bootstrap-3
user2001702
user2001702

Reputation:

Bootstrap 3: how to create an inline form with selects and labels?

My labels keep appearing above the selects. I want them all on the same line. Pls see the jsfiddle: http://jsfiddle.net/jjgelinas77/9nL9x/

<div class="well well-sm">
  <form name="myForm" role="form" novalidate="novalidate" class="form-inline">
    <div class="form-group">
      <label>C-Band</label>
      <select id="cband" class="form-control">
        <option value="C15+">C15+</option>
        <option value="C12-14">C12-14</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <div class="form-group">
      <label>C-Band</label>
      <select ng-model="form.cband2" id="cband2" class="form-control">
        <option value="C15+">C15+</option>
        <option value="C12-14">C12-14</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <button class="btn btn-primary">Filter</button>
  </form>
</div>

Upvotes: 27

Views: 62757

Answers (5)

user889030
user889030

Reputation: 4764

form-inline class with form-group will do the job like 

<div class="form-group form-inline">
<label for="sel1">My InlineSelect: </label>             
    <select class="form-control" id="rotit">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select>
</div>

demo : http://jsfiddle.net/9arahevn/2/

Upvotes: 5

ryantdecker
ryantdecker

Reputation: 1810

There's a CSS rule in bootstrap that sets the width of .form-control to 100% on small screen sizes. So even when it's floated, it will take the whole width and therefore start on a new line. Good news is you only need a couple lines of CSS to override it:

.form-control {
width:auto;
display:inline-block;
}

Hope this simplifies the problem for anyone still facing the issue! http://jsfiddle.net/c3m77ah6/2/

Upvotes: 21

Hoku
Hoku

Reputation: 81

This problem is so recorrent that there is a Github project solving it

https://fk.github.io/select2-bootstrap-css/

Place their CSS file right after the CSS from Select2

<link rel="stylesheet" href="css/select2.min.css">
<link rel="stylesheet" href="css/select2-bootstrap.css">

Then you can use the label along with the select 

<div class="form-group">
    <label for="sName">Select Title</label>
    <select class="js-example-basic-single form-control" id="sName">
    </select>
</div>

Upvotes: 1

Vadim Kirilchuk
Vadim Kirilchuk

Reputation: 3542

It does work if you use the latest bootstrap: @import url('http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');

And please DON'T FORGET to make the column with result more than 768px. Form-inline works only if screen with more than 768px. (Just drag the column with a mouse a bit)

The issue was with css for 

@media (min-width: 768px)
.form-inline .form-control {
    //old bootstrap    
    display: inline-block;

    // new bootstrap
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

Upvotes: 0

Sebsemillia
Sebsemillia

Reputation: 9486

You have to wrap your label around the select. Like this:

<div class="form-group">
  <label>C-Band
      <select id="cband" class="form-control">
         <option value="C15+">C15+</option>
         <option value="C12-14">C12-14</option>
         <option value="Other">Other</option>
      </select>
  </label> 
</div>

And then add the following CSS:

.form-group label {
    float: left;
    text-align: left;
    font-weight: normal;
}

.form-group select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

Here is your updated fiddle: Updated Fiddle

Upvotes: 10

Related Questions