Pagination is not responsive by default

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

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

[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