Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to align inputs/labels in multiple inline forms?

I am using Bootstrap 3 and I stuck on some form formatting.

E.g. I want to have 3 inline forms (each with label, text input and button) so they elements (label, text input, button) will be all perfectly matching (in column?)

If you look at this fiddle example you can see, that I almost achieved this by setting col-xs-6 to each form-group. But this makes too big space between input and submit button and also break too soon when resizing (and also when I try to align whole form set to left, everything is broken).

So is there any way to align this form elements instead of this?

  <form class="form-inline">
      <div class="form-group col-xs-6 text-right">
        <label for="exampleInputName2">Results per page</label>
        <input type="text" class="form-control" id="exampleInputName2" >
      </div>
      <div class="form-group col-xs-6">
        <button type="submit" class="btn btn-default">Save</button>
      </div>
    </form>

    <form class="form-inline">
      <div class="form-group col-xs-6 text-right">
        <label for="exampleInputName2">Keyword weight</label>
        <input type="text" class="form-control" id="exampleInputName2" >
      </div>
      <div class="form-group col-xs-6">
        <button type="submit" class="btn btn-default">Save</button>
      </div>
    </form>

    <form class="form-inline">
      <div class="form-group col-xs-6 text-right">
        <label for="exampleInputName2">Results per page</label>
        <input type="text" class="form-control" id="exampleInputName2" >
      </div>
      <div class="form-group col-xs-6">
        <button type="submit" class="btn btn-default">Save</button>
      </div>
    </form>
like image 416
Luboš Suk Avatar asked Feb 01 '26 18:02

Luboš Suk


1 Answers

This fiddle might help you. The entire layout can be put into container and each form can be given a margin and text-align css properties.

And I dont think there is a need for text-right and col-xs-6 to be included, instead you can use container to restrict the max-width and make it more responsive as shown in the fiddle.

like image 110
Diwakar Moturu Avatar answered Feb 04 '26 15:02

Diwakar Moturu



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!