Bootstrap 3 buttons and input to be grouped in one row - html

Question

I have a bunch of buttons and an input text box. But they are not aligned properly as shown.
<div class="col-md-12 pull-right">
<div class="pull-right">
<button type="button" class="btn btn-default btn-xs"> << </button>
<button type="button" class="btn btn-default btn-xs"> < </button>
<button type="button" class="btn btn-default btn-xs"> > </button>
<button type="button" class="btn btn-default btn-xs"> >> </button>
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
</div>
Is there a way they are alligned in one row? Also notice that the size of the input box is looking different from the others. Is there a way to fix this too?

Answer 1

using btn-group arranges all buttons in a row. like this
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs"><<</button>
<button type="button" class="btn btn-default btn-xs"><</button>
<button type="button" class="btn btn-default btn-xs">></button>
<button type="button" class="btn btn-default btn-xs">>></button>
<input type="number" style="width: 30px; margin-top:10px" class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
Note: When using HTML symbols(for example <,>) as text, then encode them as I did(Just a good practice).
Docs btn-groups
And I used inline style for input type number margin-top:10px; because input[type=number] in bootstrap has margin-bottom:10px; so, to balance used margin-top. Instead you can use margin-bottom:0px
As #Mike Robinson said, even .input-append does the same . the difference is rounded borders and input-append is converted to input-group from version 3
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="input-append">
<button type="button" class="btn btn-default btn-xs"><<</button>
<button type="button" class="btn btn-default btn-xs"><</button>
<button type="button" class="btn btn-default btn-xs">></button>
<button type="button" class="btn btn-default btn-xs">>></button>
<input type="number" style="width: 30px; " class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>

Answer 2

You need an input-group. You can add on groups of buttons to either side of the input. Here they'll be on the left:
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
Read more about it here:
http://getbootstrap.com/components/#input-groups-buttons-multiple

Answer 3

The form-control style on your input is the thing that's moving it to the next line. It's doing so because the form-control style in bootstrap is set to display: block. By adding a new style or doing an inline style you can get them on the same page.
For instance:
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" style="display: initial;" />
Or you can make a class such as:
.newInputControl{
display: inline;
}
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" class="newInputControl" />
You can also take care of it using bootstrap, which has built the framework to handle this by placing your form-control inside an input group.

Answer 4

use:
form-control-static instead of form-control in your input text