Pagination is not responsive by default

[ghost]

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

[jipexu]

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 ?....

[ghost]

@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]

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]

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

[jipexu]

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

[mdo]

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.

[assismoraes]

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

`

</div>`

[Sergio1C]

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

[StCyr]

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.

I understand your argument but, still, something should be done imho.

By default, pagination component's unresponsiveness might make it really ugly on small devices. And, the solutions you propose ("Remove some of the pagination links, use a smaller variant") either doesn't totally solve the issue ("use a smaller variant") or is not a trivial task ("Remove some of the pagination links").

Anyway, none of the solutions you propose is responsive, which is not a good thing, I believe, and contradict bootsrap's philosophy from what I understand (see https://getbootstrap.com/ : "Build responsive, mobile-first projects on the web")

I think they are other alternatives worth considering:

The simplest one would be to document this limitation on https://getbootstrap.com/docs/4.1/components/pagination/ (I find it bad documentation design to let the users have to dig into bug reports to find information). Just adding a small Wrapping paragraph would do the trick imho. Its content would be something like;

Pagination components are not responsive. So, pagination links won't wrap when the device 'screen is smaller than the minimum size needed to display them. You can work around this by adding the ".flex-wrap" class to your <ul> tag (as shown in exemple hereunder), but a better solution would be to remove some of the pagination links.

A better solution, though probably much harder, would be to make this component able to automatically remove pagination links dependent on the device 'screen size. This might make this component considered responsive.

I hope you will agree with me and do something else than not fixing this issue.

Best regards

[kdion4891]

I think a better solution would be to allow us to specify simpleLinks in the blade template, so that we can use simply links on mobile and numbered links on desktop.

[QuinnBast]

I have to follow up here because this seems like it is against all things bootstrap. Bootstrap has all these responsive components and then pagination isn't responsive?

Here's a pagination control on iPhone:

All that needs to be done to fix this is to add flex-wrap: wrap; to the .pagination css class:

.pagination {
    display: -ms-flexbox;
    flex-wrap: wrap;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}

And it actually fits on the screen. Sure its not the greatest but this is way better than it overflowing the sides.

[jilaan]

I have to follow up here because this seems like it is against all things bootstrap. Bootstrap has all these responsive components and then pagination isn't responsive?

Here's a pagination control on iPhone:

All that needs to be done to fix this is to add flex-wrap: wrap; to the .pagination css class:

.pagination {
    display: -ms-flexbox;
    flex-wrap: wrap;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}

And it actually fits on the screen. Sure its not the greatest but this is way better than it overflowing the sides.

really this is helpful code. thanks dear