Snippet for Pagination in Panel Components Heading and Footer in Bootstrap 3

bs3-panel-heading-pagination.html

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title pull-left">Panel title</h3>
    <ul class="pagination pagination-panel pull-right">
      <li><a href="#">«</a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">»</a></li>
    </ul>
    <div class="clearfix"></div>
  </div>
  <div class="panel-body">
    Panel Content
    <hr>
    Panel Content
    <hr>
    Panel Content
  </div>
  <div class="panel-footer">
    Panel Footer
    <ul class="pagination pagination-panel pull-right">
      <li><a href="#">«</a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">»</a></li>
    </ul>
    <div class="clearfix"></div>
  </div>
</div>

style.css

.panel-heading .pagination-panel, 
.panel-footer .pagination-panel {
    margin: -11px -16px; /* Based off default .panel-heading padding */
    
    > li {
        > a,
        > span {
            padding: 10px 18px; /* Based off default .panel-heading padding */
        }
    }
    
}

.panel-heading .pagination-panel {
    > li {
        &:last-child {
            > a,
            > span {
                border-bottom-right-radius: 0;
            }
        }
    }
}

.panel-footer .pagination-panel {
    > li {
        &:last-child {
            > a,
            > span {
                border-top-right-radius: 0;
            }
        }
    }
}