CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Furman
Furman

Reputation: 2415

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?

Upvotes: 6

Views: 21348

Answers (2)

Head In Cloud
Head In Cloud

Reputation: 2051

You want this

<!DOCTYPE html>
<html lang="en">
  <head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
 <body>
   
<form class="form-inline">
  <div class="form-group">
    <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> 
  </div>

</form>
    
</body>
</html>

Upvotes: 8

BENARD Patrick
BENARD Patrick

Reputation: 30995

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>

Upvotes: 10

Related Questions