- var page_Title = 'Pagination';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Paginations
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item  Bonus Ui
                    li.breadcrumb-item.active Pagination
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              // simple pagination
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Default Pagination
                    p.f-m-light.mt-1
                      | If the pagination component is used to navigate between a set of search results, an appropriate label could be 
                      code aria-label="Search results pages"
                      | .
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code    
                        li
                          i.icofont.icofont-maximize.full-card 
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card                 
                  .card-body
                    nav(aria-label='Page navigation example')
                      ul.pagination.pagination-primary.pagin-border-primary(class="[@media(max-width:339px)]:justify-center")
                        li.page-item
                          a.page-link(href='#!') Previous
                        li.page-item
                          a.page-link(href='#!') 1
                        li.page-item
                          a.page-link(href='#!') 2
                        li.page-item
                          a.page-link(href='#!') 3
                        li.page-item
                          a.page-link(href='#!') Next
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#pagination-default', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#pagination-default
                          |&lt;nav aria-label="Page navigation example"&gt;
                          |  &lt;ul class="pagination pagination-primary pagin-border-primary"&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Previous&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;1&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;2&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;3&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Next&lt;/a&gt;&lt;/li&gt;
                          |  &lt;/ul&gt;
                          |&lt;/nav&gt;
              // pagination with active and disabled state
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Pagination With Active And Disabled
                    p.f-m-light.mt-1
                      | Use 
                      code disabled 
                      | for links that appear un-clickable and
                      code  active
                      |  to indicate the current page.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card                 
                  .card-body
                    nav(aria-label='...')
                      ul.pagination.pagination-success.pagin-border-success(class="[@media(max-width:339px)]:justify-center")
                        li.page-item.disabled
                          a.page-link(href='#!', tabindex='-1') Previous
                        li.page-item
                          a.page-link(href='#!') 1
                        li.page-item.active
                          a.page-link(href='#!')
                            | 2 
                            span.sr-only (current)
                        li.page-item
                          a.page-link(href='#!') 3
                        li.page-item
                          a.page-link(href='#!') Next
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#pagination-disable', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#pagination-disable
                          |&lt;nav aria-label="..."&gt;
                          |  &lt;ul class="pagination pagination-success pagin-border-success"&gt;
                          |    &lt;li class="page-item disabled"&gt;&lt;a class="page-link" href="#!" tabindex="-1"&gt;Previous&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;1&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item active"&gt;&lt;a class="page-link" href="#!"&gt;2 &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;3&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Next&lt;/a&gt;&lt;/li&gt;
                          |  &lt;/ul&gt;
                          |&lt;/nav&gt;
              // pagination with icons
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Pagination With Icons
                    p.f-m-light.mt-1
                      | Use an icon or symbol in place of text for some pagination links.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card                 
                  .card-body
                    nav(aria-label='Page navigation example')
                      ul.pagination.pagination-secondary.pagin-border-secondary(class="[@media(max-width:339px)]:justify-center")
                        li.page-item
                          a.page-link(href='#!', aria-label='Previous')
                            span(aria-hidden='true') «
                            span.sr-only Previous
                        li.page-item
                          a.page-link(href='#!') 1
                        li.page-item
                          a.page-link(href='#!') 2
                        li.page-item
                          a.page-link(href='#!') 3
                        li.page-item
                          a.page-link(href='#!') ...
                        li.page-item
                          a.page-link(href='#!') 20
                        li.page-item
                          a.page-link(href='#!', aria-label='Next')
                            span(aria-hidden='true') »
                            span.sr-only Next
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#pagination-icon', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#pagination-icon
                          |&lt;nav aria-label="Page navigation example"&gt;
                          |  &lt;ul class="pagination pagination-secondary pagin-border-secondary"&gt;
                          |    &lt;li class="page-item"&gt;
                          |      &lt;a class="page-link" href="#!" aria-label="Previous"&gt;
                          |        &lt;span aria-hidden="true"&gt;«&lt;/span&gt;
                          |        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                          |      &lt;/a&gt;
                          |    &lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;1&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;2&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;3&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;...&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;20&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;
                          |      &lt;a class="page-link" href="#!" aria-label="Next"&gt;
                          |        &lt;span aria-hidden="true"&gt;»&lt;/span&gt;
                          |        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                          |      &lt;/a&gt;
                          |    &lt;/li&gt;
                          |  &lt;/ul&gt;
                          |&lt;/nav&gt;
              // Rounded Pagination
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5  Rounded Pagination
                    p.f-m-light.mt-1
                      | Used in rounded pagination.Use an icon or symbol in place of text for some pagination links.
                      code [rounded-full]
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card                  
                  .card-body
                    nav(aria-label='Page navigation example')
                      ul.pagination.pagination-dark.pagin-border-dark.gap-2
                        li.page-item
                          a.page-link(href='#!', aria-label='Previous' class="!rounded-full")
                            span(aria-hidden='true') «
                            span.sr-only Previous
                        li.page-item
                          a.page-link.rounded-full(href='#!') 1
                        li.page-item
                          a.page-link.rounded-full(href='#!') 2
                        li.page-item
                          a.page-link.rounded-full(href='#!') ...
                        li.page-item
                          a.page-link.rounded-full(href='#!') 20
                        li.page-item
                          a.page-link.rounded-full(href='#!', aria-label='Next' class="!rounded-full")
                            span(aria-hidden='true') »
                            span.sr-only Next
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#pagination-rounded', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#pagination-rounded
                          |&lt;nav aria-label="Page navigation example"&gt;
                          |  &lt;ul class="pagination pagination-dark pagin-border-dark gap-2"&gt;
                          |    &lt;li class="page-item"&gt;
                          |      &lt;a class="page-link rounded-full" href="#!" aria-label="Previous"&gt;
                          |        &lt;span aria-hidden="true"&gt;«&lt;/span&gt;
                          |        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                          |      &lt;/a&gt;
                          |    &lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link rounded-full" href="#!"&gt;1&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link rounded-full" href="#!"&gt;2&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link rounded-full" href="#!"&gt;...&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;&lt;a class="page-link rounded-full" href="#!"&gt;20&lt;/a&gt;&lt;/li&gt;
                          |    &lt;li class="page-item"&gt;
                          |      &lt;a class="page-link rounded-full" href="#!" aria-label="Next"&gt;
                          |        &lt;span aria-hidden="true"&gt;»&lt;/span&gt;
                          |        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                          |      &lt;/a&gt;
                          |    &lt;/li&gt;
                          |  &lt;/ul&gt;
                          |&lt;/nav&gt;
              // pagination alignments
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                    h5 Pagination Alignment
                    p.f-m-light.mt-1
                      | Change the alignment of pagination components with flexbox utilities. For example, with 
                      code justify-center:*
                      | .
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card                  
                  .card-body
                    // left aligned pagination
                    nav(aria-label='Page navigation example' class="mb-[30px]")
                      ul.pagination.pagin-border-warning.pagination-warning(class="[@media(max-width:339px)]:justify-center")
                        li.page-item
                          a.page-link(href='#!') Previous
                        li.page-item
                          a.page-link(href='#!') 1
                        li.page-item
                          a.page-link(href='#!') 2
                        li.page-item
                          a.page-link(href='#!') 3
                        li.page-item
                          a.page-link(href='#!') Next
                    // center aligned pagination
                    nav(aria-label='Page navigation example' class="mb-[30px]")
                      ul.pagination.justify-center.pagin-border-danger.pagination-danger(class="[@media(max-width:339px)]:justify-center")
                        li.page-item
                          a.page-link(href='#!') Previous
                        li.page-item
                          a.page-link(href='#!') I 
                        li.page-item.active
                          a.page-link(href='#!') II 
                        li.page-item
                          a.page-link(href='#!') III
                        li.page-item
                          a.page-link(href='#!') Next
                    // right aligned pagination
                    nav(aria-label='Page navigation example' class="mb-[30px]")
                      ul.pagination.justify-end.pagin-border-success.pagination-success(class="[@media(max-width:339px)]:justify-center")
                        li.page-item
                          a.page-link(href='#!') Previous
                        li.page-item
                          a.page-link(href='#!') i 
                        li.page-item
                          a.page-link(href='#!') ii 
                        li.page-item
                          a.page-link(href='#!') iii
                        li.page-item
                          a.page-link(href='#!') Next
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#pagination-align', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#pagination-align
                          |&lt;div class="card-body"&gt;
                          |  &lt;!-- left aligned pagination--&gt;
                          |  &lt;nav class="m-b-30" aria-label="Page navigation example"&gt;
                          |    &lt;ul class="pagination pagin-border-warning pagination-warning"&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Previous&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;1&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;2&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;3&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Next&lt;/a&gt;&lt;/li&gt;
                          |    &lt;/ul&gt;
                          |  &lt;/nav&gt;
                          |  &lt;!-- center aligned pagination--&gt;
                          |  &lt;nav class="m-b-30" aria-label="Page navigation example"&gt;
                          |    &lt;ul class="pagination justify-center pagin-border-danger pagination-danger"&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Previous&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;I &lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item active"&gt;&lt;a class="page-link" href="#!"&gt;II &lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;III&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Next&lt;/a&gt;&lt;/li&gt;
                          |    &lt;/ul&gt;
                          |  &lt;/nav&gt;
                          |  &lt;!-- right aligned pagination--&gt;
                          |  &lt;nav aria-label="Page navigation example"&gt;
                          |    &lt;ul class="pagination justify-end pagin-border-success pagination-success"&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Previous&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;i &lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;ii &lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;iii&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Next&lt;/a&gt;&lt;/li&gt;
                          |    &lt;/ul&gt;
                          |  &lt;/nav&gt;
                          |  &lt;div class="code-box-copy"&gt;
                          |    &lt;button class="code-box-copy__btn btn-clipboard" data-clipboard-target="#pagination-align" title="Copy"&gt;&lt;i class="icofont icofont-copy-alt"&gt;&lt;/i&gt;&lt;/button&gt;
                          |    &lt;pre class="custom-scrollbar"&gt;&lt;code class="language-html" id="pagination-align"&gt;&lt;/code&gt;&lt;/pre&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              // pagination sizing
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header
                    h5 Pagination Sizing
                    p.f-m-light.mt-1
                      | Use 
                      code [pagination-lg/pagination-md/pagination-lg]
                      |  for additional sizes.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card                  
                  .card-body
                    // large size pagination
                    nav(aria-label='Page navigation example' class="mb-[30px]")
                      ul.pagination.pagination-lg.pagination-info.pagin-border-info(class="[@media(max-width:339px)]:justify-center")
                        li.page-item
                          a.page-link(href='#!' class="[@media(max-width:576px)]:!text-[calc(_15px_+_(20_-_15)_*_((100vw_-_320px)_/_(576_-_320)))] [@media(max-width:576px)]:!py-[calc(12px_+_(12_-_12)_*_((100vw_-_320px)_/_(576_-_320)))] [@media(max-width:576px)]:!px-[calc(12px_+_(24_-_12)_*_((100vw_-_320px)_/_(576_-_320)))]") Previous
                        li.page-item
                          a.page-link(href='#!' class="[@media(max-width:576px)]:!text-[calc(_15px_+_(20_-_15)_*_((100vw_-_320px)_/_(576_-_320)))] [@media(max-width:576px)]:!py-[calc(12px_+_(12_-_12)_*_((100vw_-_320px)_/_(576_-_320)))] [@media(max-width:576px)]:!px-[calc(12px_+_(24_-_12)_*_((100vw_-_320px)_/_(576_-_320)))]") 1
                        li.page-item
                          a.page-link(href='#!' class="[@media(max-width:576px)]:!text-[calc(_15px_+_(20_-_15)_*_((100vw_-_320px)_/_(576_-_320)))] [@media(max-width:576px)]:!py-[calc(12px_+_(12_-_12)_*_((100vw_-_320px)_/_(576_-_320)))] [@media(max-width:576px)]:!px-[calc(12px_+_(24_-_12)_*_((100vw_-_320px)_/_(576_-_320)))]") 2
                        li.page-item
                          a.page-link(href='#!' class="[@media(max-width:576px)]:!text-[calc(_15px_+_(20_-_15)_*_((100vw_-_320px)_/_(576_-_320)))] [@media(max-width:576px)]:!py-[calc(12px_+_(12_-_12)_*_((100vw_-_320px)_/_(576_-_320)))] [@media(max-width:576px)]:!px-[calc(12px_+_(24_-_12)_*_((100vw_-_320px)_/_(576_-_320)))]") 3
                        li.page-item
                          a.page-link(href='#!' class="[@media(max-width:576px)]:!text-[calc(_15px_+_(20_-_15)_*_((100vw_-_320px)_/_(576_-_320)))] [@media(max-width:576px)]:!py-[calc(12px_+_(12_-_12)_*_((100vw_-_320px)_/_(576_-_320)))] [@media(max-width:576px)]:!px-[calc(12px_+_(24_-_12)_*_((100vw_-_320px)_/_(576_-_320)))]") Next
                    //medium size pagination
                    nav(aria-label='Page navigation example' class="mb-[30px]")
                      ul.pagination.pagination-md.pagination-info.pagin-border-info
                        li.page-item
                          a.page-link(href='#!' class="[@media(max-width:576px)]:text-[calc(15px_+_(20_-_15)_*_((100vw_-_320px)_/_(576_-_320)))]") Previous
                        li.page-item
                          a.page-link(href='#!' class="[@media(max-width:576px)]:text-[calc(15px_+_(20_-_15)_*_((100vw_-_320px)_/_(576_-_320)))]") 1
                        li.page-item
                          a.page-link(href='#!' class="[@media(max-width:576px)]:text-[calc(15px_+_(20_-_15)_*_((100vw_-_320px)_/_(576_-_320)))]") 2
                        li.page-item
                          a.page-link(href='#!' class="[@media(max-width:576px)]:text-[calc(15px_+_(20_-_15)_*_((100vw_-_320px)_/_(576_-_320)))]") 3
                        li.page-item
                          a.page-link(href='#!' class="[@media(max-width:576px)]:text-[calc(15px_+_(20_-_15)_*_((100vw_-_320px)_/_(576_-_320)))]") Next
                    // small size pagination
                    nav(aria-label='Page navigation example')
                      ul.pagination.pagination-sm.pagination-info.pagin-border-info(class="[@media(max-width:339px)]:justify-center")
                        li.page-item
                          a.page-link(href='#!') Previous
                        li.page-item
                          a.page-link(href='#!') 1
                        li.page-item
                          a.page-link(href='#!') 2
                        li.page-item
                          a.page-link(href='#!') 3
                        li.page-item
                          a.page-link(href='#!') Next
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#pagination-sizing', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#pagination-sizing
                          |&lt;div class="card-body"&gt;
                          |  &lt;!-- large size pagination--&gt;
                          |  &lt;nav class="m-b-30" aria-label="Page navigation example"&gt;
                          |    &lt;ul class="pagination pagination-lg pagination-info pagin-border-info"&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Previous&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;1&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;2&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;3&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Next&lt;/a&gt;&lt;/li&gt;
                          |    &lt;/ul&gt;
                          |  &lt;/nav&gt;
                          |  &lt;!--medium size pagination--&gt;
                          |  &lt;nav class="m-b-30" aria-label="Page navigation example"&gt;
                          |    &lt;ul class="pagination pagination-md pagination-info pagin-border-info"&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Previous&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;1&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;2&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;3&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Next&lt;/a&gt;&lt;/li&gt;
                          |    &lt;/ul&gt;
                          |  &lt;/nav&gt;
                          |  &lt;!-- small size pagination--&gt;
                          |  &lt;nav aria-label="Page navigation example"&gt;
                          |    &lt;ul class="pagination pagination-sm pagination-info pagin-border-info"&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Previous&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;1&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;2&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;3&lt;/a&gt;&lt;/li&gt;
                          |      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#!"&gt;Next&lt;/a&gt;&lt;/li&gt;
                          |    &lt;/ul&gt;
                          |  &lt;/nav&gt;
                          |  &lt;div class="code-box-copy"&gt;
                          |    &lt;button class="code-box-copy__btn btn-clipboard" data-clipboard-target="#pagination-sizing" title="Copy"&gt;
                          |      &lt;i class="icofont icofont-copy-alt"&gt;&lt;/i&gt;
                          |    &lt;/button&gt;
                          |    &lt;pre class="custom-scrollbar"&gt;&lt;code class="language-html" id="pagination-sizing"&gt;&lt;/code&gt;&lt;/pre&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
