button group and textbox in middle in bootstrap - css

Question

I am creating pager using bootstrap as given below using input-group.
+──+─+───+──+─+──+
│<<│<│ 1 │GO│>│>>│
+──+─+───+──+─+──+
but it moves the part after textbox on right side.
Sample code is I have added at
https://jsfiddle.net/386my76a/
Would there be any bootstrap's inbuilt solution or I need to fix it adding custom CSS (ex: float left for 2nd part)?

Answer 1

What you can do is to set the minimal width of entire input-group (like width: 1%;) and wrap input field into .input-group-btn class:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {margin: 10px;}
.pagination {width: 1%;}
<div class="container">
<div class="input-group pagination">
<div class="input-group-btn">
<button class="btn btn-default" type="button"><<</button>
<button class="btn btn-default" type="button"><</button>
</div>
<div class="input-group-btn">
<input class="form-control" type="text" style="width: 50px;" value="2">
</div>
<div class="input-group-btn">
<button class="btn btn-primary" type="button">Go</button>
<button class="btn btn-default" type="button">></button>
<button class="btn btn-default" type="button">>></button>
</div>
</div>
</div>

Answer 2

Bootstrap do have their own pagination class and you can directly use it to make your pagination.
<ul class="pagination">
<li class="disabled">«</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>»</li>
</ul>
You can check out this link here and it shows how it works:
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=pagination-with-disabled-and-active-state-01
Hope it helps.