Put input fields inline - bootstrap v3

Question

Here I have a bootstrap form v3 and I try to make this form to be inline so ha,ar,m2 to be inline... I have:

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="naziv">Naziv</label>  
  <div class="col-md-4">
  <input id="naziv" name="naziv" type="text" placeholder="naziv parcele" class="form-control input-md" required="">

  </div>
</div>

<!-- Appended Input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="ha">Povrsina</label>
  <div class="col-md-2">
    <div class="input-group">
      <input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
      <span class="input-group-addon">ha</span>
    </div>

  </div>
</div>
<!-- Appended Input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="ar"></label>
  <div class="col-md-2">
    <div class="input-group">
      <input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
      <span class="input-group-addon">ar</span>
    </div>

  </div>
</div>
<!-- Appended Input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="m2"></label>
  <div class="col-md-2">
    <div class="input-group">
      <input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
      <span class="input-group-addon">m2</span>
    </div>

  </div>
</div>
</fieldset>
</form>

But how I can put #ha, #ar, #m2 elements inline so in the same row?

Any idea? I try with form-inline but dont work.

Here is a fiddle

please update jsfiddle jsfiddle.net/52VtD/3490/embedded/result to see — gmaestro
– gmaestro, Commented Mar 12, 2014 at 18:43

Hashem Qolami · Accepted Answer · 2014-03-12 18:50:54Z

In order to keep the inputs in one row, you could put the columns containing .input-group in one form-group element, as follows:

<div class="form-group">
    <label class="col-md-3 control-label" for="ha">Povrsina</label>

    <div class="col-md-3">
      <div class="input-group">
        <input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
        <span class="input-group-addon">ha</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="input-group">
        <input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
        <span class="input-group-addon">ar</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="input-group">
        <input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
        <span class="input-group-addon">m2</span>
      </div>
    </div>
</div>

WORKING DEMO.

Note that you should change the class names of the columns within your own demo to prevent exceeding the 12-column grid.

Collectives™ on Stack Overflow

Put input fields inline - bootstrap v3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related