CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3pagination
ba-doyn
ba-doyn

Reputation: 13

Adding jump to page link in Bootstrap 3 pagination and styling issues

I am using bootstrap 3 pagination. No problems there. Now the client wants a jump-to-page feature to the left of the pagination (see the below mockup image and html to make it look that way). It's giving me fits when I add the jump-to to get it to place properly. I've tried an overall div with position:relative and the jump-to and pagination within with a position:absolute. I've tried a div with just jump-to and different positioning. The closest I got was to add the jump-to feature to the li of the pagination. This only works with the a tag or else it will move to the right of the pagination. (sorry, not very used to the formatting here)

For some reason I can't get it to style properly (remove hover, etc), and place to the left of the pagination, if I remove the a tag.

This is totally aggravating me as I know I'm missing something.

I did a search and read a bunch of items with no avail. Any help would be appreciated.

Here is the mockup and html. I used inline styles only for quick viewing.

mockup

<ul class="pagination pagination-sm pull-right">
  <li class="form-group input-group-sm"><a style="border:none;margin-top:-10px;">Go to page <input size="4" placeholder="page #"></input><button class="btn btn-primary btn-xs>Go</button></a></li>
  <li><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
</ul>

Upvotes: 0

Views: 2741

Answers (1)

Rachel S
Rachel S

Reputation: 3920

Your code has a few bugs, btw. But that aside, don't put the form group into the same <ul> of the pagination since there's lots of styling issues. I think it would be easier to use the go to part input-group in a div as it's meant to be, outside the pagination.

http://www.bootply.com/8RxnexxEtD

Remove margins and set display to inline and you're all set.

Upvotes: 1

Related Questions