CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Minas Minas
Minas Minas

Reputation: 91

How to get inputs in the same line with css?

Hi I have this following code:

    <div class="panel panel-primary fixed-panel">
    <div class="panel-heading">Test</div>
    <div class="panel-body">
        <div class="col-xs-4">
            <form name="myForm">
                <label for="startInput">Start:</label><br />
                <input type="text" id="startInput" class="form-control" name="start">

                <label for="endInput">End:</label><br />
                <input type="text" id="endInput" class="form-control" name="end">
            </form>
        </div>
      </div>
  </div>

How is it possible, that i get the inputs in the same line? I want that the labels are still above the inputs.

Upvotes: 0

Views: 84

Answers (2)

Bhaskar Dabhi
Bhaskar Dabhi

Reputation: 909

Use .form-inline for form as bootstrap stated in documentation

Pasting the fiddle here fiddle

Here is the new dom.

<div class="panel panel-primary fixed-panel">
  <div class="panel-heading">Test</div>
    <div class="panel-body">

        <form name="myForm" class="form-inline">
            <div class="form-group">
              <label for="startInput">Start:</label>
              <input type="text" id="startInput" class="form-control"  name="start">
             </div>
                <div class="form-group">

                  <label for="endInput">End:</label>
                  <input type="text" id="endInput" class="form-control" name="end">
                </div>
        </form>
      </div>
  </div>

Upvotes: 0

Stafox
Stafox

Reputation: 1005

I see you use bootstrap, so just add the class form-inline to your form tag, and wrap your label and input tags to div.form-group

More about it here: http://getbootstrap.com/css/#forms-inline

Or like this: http://jsfiddle.net/Stafox/5manb2at/

Upvotes: 1

Related Questions