New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination is not responsive by default #23504

Closed
anaggh opened this Issue Aug 16, 2017 · 8 comments

Comments

Projects
None yet
7 participants
@anaggh

anaggh commented Aug 16, 2017

Version: Bootstrap v4 beta

Reproduce Steps:
Add several page-item to pagination.
Resize browser and check mobile view.

Had to add flex-wrap to fix it. ( <ul class="pagination flex-wrap">)

https://jsbin.com/fuduqusufe/edit?html,output

@Johann-S Johann-S added css v4 labels Aug 16, 2017

@jipexu

This comment has been minimized.

Contributor

jipexu commented Aug 17, 2017

Hi true (add flex-wrap to your ul .pagination) is only the way to do the job (even if is not perfect) ... but in other hand a very long (width) pagination bloc is not really the best UI experience ?....

@anaggh

This comment has been minimized.

anaggh commented Aug 18, 2017

@jipexu Yup but it was responsive by default on BS3 and broke when I updated to BS4. Would be nice to have this responsive by default since it looks ugly even if there are less than 15 pages on mobile.

@jipexu

This comment has been minimized.

Contributor

jipexu commented Aug 18, 2017

yep but really a pagination wrapped (in BS 4 and in 3) is not very beautiful ... i really dont like (the first li on the second ligne with 90° angle just below the first li of the first ligne with rounded angle ...)

@Joyrex

This comment has been minimized.

Joyrex commented Aug 21, 2017

I think DataTables implementation of pagination is handled well - this is Bootstrap 4 Beta 1 running on DataTables:
image

@jipexu

This comment has been minimized.

Contributor

jipexu commented Aug 21, 2017

i just spoke about this behavior when the nav is to width ..

pagination

@mdo

This comment has been minimized.

Member

mdo commented Aug 22, 2017

The v3 pagination component was "responsive" because it was built with floats instead of flexbox. This wasn't by design and is a "visual bug" IMO—don't let this be the design you ship. Remove some of the pagination links, use a smaller variant, etc.

Closing as a won't fix.

@mdo mdo closed this Aug 22, 2017

xcaptain added a commit to xcaptain/framework that referenced this issue Sep 7, 2017

add flex-wrap to make pagination more responsive
Since bootstrap4 doesn't support responsive pagination, detailed discussion can be found here twbs/bootstrap#23504

 so a long pagination would make page width bigger than the screen width
@assismoraes

This comment has been minimized.

assismoraes commented Mar 26, 2018

I know it is a long time from last update. But this works very well for me.

<div class="nav-scroller py-1 mb-2"> <nav class="nav d-flex justify-content-center"> <ul class="pagination pagination-sm flex-sm-wrap"> </ul> </nav> </div>

@Sergio1C

This comment has been minimized.

Sergio1C commented Jul 17, 2018

Had to add flex-wrap to fix it.
It is possible for bootstrap 3? (3.3.7)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment