Furman Furman - 4 months ago 12
HTML Question

Select form and its label in same line in bootstrap3

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?

Answer

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