CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Luboš Suk
Luboš Suk

Reputation: 1546

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>

Upvotes: 3

Views: 1628

Answers (2)

Diwakar Moturu
Diwakar Moturu

Reputation: 652

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.

Upvotes: 2

Pete
Pete

Reputation: 58462

Why not just give a width to your label? If you put the three elements into the same column then you can just make the label inline-block and give it a width (you may need to use the full page link in the snippet below to see this working)

.form-group > label {
  display: inline-block;
  vertical-align: middle;
  width: 9em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Results per page</label>
    <input type="text" class="form-control" id="exampleInputName2">
    <button type="submit" class="btn btn-default">Save</button>
  </div>
</form>

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

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

Upvotes: 1

Related Questions