Pagination component is not responsive (doesn't wrap)

Bug description:

When pagination has enough pages to extend beyond the available width of the screen it doesn’t wrap. I tried adding

class="d-flex flex-wrap justify-content-center"

to the ngb-pagination html tag but that had no effect. It needs to be added the ul tag that has the pagination class applied to it to have an effect. As a hacky work-around in my style.scss Sass I use an extend on the .pagination class to include those other classes:

@import "~bootstrap/scss/bootstrap";

.pagination
{
  @extend .d-flex, .flex-wrap, .justify-content-center;
}

If you remove the above class extend in the stackblitz’s style.scss example linked below you can see the default behavior.

For those who wish to not implement Sass, the following in style.css should also work:

.pagination
{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
  -webkit-justify-content: center;
  flex-wrap : wrap;
  -webkit-flex-wrap: wrap;
}

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/bootstrap4paginationflex

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.0.4

ng-bootstrap: 4.0.0

Bootstrap: 4.1.3

[syedsaadqamar]

In my case, I faced the pagination width issue that exceeds the same as that

I fixed that by adding [maxSize]="5"

[benouat]

@talynone this is not what I’m seeing…

@talynone I think that what @pkozlowski-opensource meant here is that we can’t see this behaviour on raw Bootstrap, this feature is not supported either in here.

On top of that, looking at your screenshots, I would strongly suggest not to do that. It would be terrible in term of user experience!

In that specific case, I would myself use the Advanced pagination with the option Restricted size with rotation

---

So conclusion here might be sad 😞, but I will close this issue as we won’t probably ever fix that, especially that bootstrap is not supporting it…

You already have a workaround, if you really want to see it fixed, i would suggest you open a bug report on Bootstrap itself. If they implement it, you will get it here also for free !! 🎉