Laravel pagination-sm pagination-lg class not working together for different breakpoint

This is what I'm trying but only pagination-sm class is working on all breakpoint

<ul class="pagination mb-0 pagination-sm pagination-lg" role="navigation">
    <li class="page-item"><a href="#">Previous</a></li>
    <li class="page-item"><a href="#">1</a></li>
    <li class="page-item"><a href="#">2</a></li>
    <li class="page-item"><a href="#">3</a></li>
    <li class="page-item"><a href="#">Next</a></li>
</ul>

Solution

pagination-sm is not a media query specific CSS. It means that the pagination items must be shown small in all views.If you need different styles for small and large devices, you will need to add some custom media query CSS to do so.

.pagination .page-link {
  padding: .25rem .5rem;
}

@media screen and (min-width: 576px) {
  .pagination .page-link {
    padding: .5rem .75rem;
  }
}
@media screen and (min-width: 992px) {
  .pagination .page-link {
    padding: .75rem 1.5rem;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav aria-label="Page navigation example" class="mt-4">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>