HOME


Mini Shell 1.0
Redirecting to https://devs.lapieza.net/iniciar-sesion Redirecting to https://devs.lapieza.net/iniciar-sesion.
DIR: /var/www/devs.lapieza.net/diseno/support-center/
Upload File :
Current File : /var/www/devs.lapieza.net/diseno/support-center/pagination.php
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title> Soporte - La Pieza.DO </title>
  <!-- /Required meta tags -->

  <!-- Favicon -->
  <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
  <!-- /Favicon -->

  <!-- All CSS -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik">
  <!-- Vendor Css -->
  <link rel="stylesheet" href="css/vendor.css">
  <!-- /Vendor Css -->

  <!-- Plugin Css -->
  <link rel="stylesheet" href="css/plugins.css">
  <!-- Plugin Css -->

  <!-- Icons Css -->
  <link rel="stylesheet" href="css/icons.css">
  <!-- /Icons Css -->

  <!-- Style Css -->
  <link rel="stylesheet" href="css/style.css">
  <!-- /Style Css -->
  <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css" integrity="sha512-vebUliqxrVkBy3gucMhClmyQP9On/HAWQdKDXRaAlb/FKuTbxkjPKUyqVOxAcGwFDka79eTF+YXwfke1h3/wfg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- /All CSS -->

</head>

<body>

  <!-- PreLoader -->
  <div id="preloader">
    <div id="status">
      <div class="spinner"></div>
    </div>
  </div>
  <!--Preloader-->

  <!-- Mobile Canvus Menu -->
  <div class="mobile_canvus_menu">
    <div class="close_btn">
      <img src="img/icon/close-dark.png" alt="">
    </div>
    <div class="menu_part_lux">
      <ul class="menu_list wd_scroll">
        <li><a href='/'>Inicio</a></li>
        <li>
          <a href="./intro.php">Documentación
            <i class="las la-angle-down"></i>
          </a>
          <ul class="list">
            <li><a href='./intro.php'>Inicia Aquí</a></li>
            <li><a href='./article.php'>Articulos</a></li>
            <li><a href='./buttons.php'>Botones</a></li>
            <li><a href='./image.php'>Imagenes</a></li>
            <li><a href='./pagination.php'>Paginacion</a></li>
            <li><a href='./changelog.php'>Registro de Cámbios</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Pages
            <i class="las la-angle-down"></i>
          </a>
          <ul class="list">
            <li><a href='./404.php'>404</a></li>
            <li><a href='./article.php'>Articulos</a></li>
            <li><a href='./login.php'>Login</a></li>
            <li><a href='./register.php'>Registro</a></li>
            <li><a href='./forget-password.php'>Olvidé password</a></li>
            <li><a href='./faqs.php'>Faq</a></li>
            <li><a href='./changelog.php'>Registro de Cámbios</a></li>
          </ul>
        </li>

        <li>
          <a href='./blog.php'>Blog
            <i class="las la-angle-down"></i>
          </a>
          <ul class="list">
            <li><a href='./blog.php'>Blog</a></li>
            <li><a href='./blog-deatail.php'>Detalles del Blog</a></li>

          </ul>
        </li>
        <li><a href="./contact.php">Contacto</a></li>
      </ul>
    </div>
    <div class="menu_btm">
      <a class='ticket-btn' href="./contact.php"><i class="las la-ticket-alt"></i> Crear un Ticket</a>
    </div>
  </div>
  <!-- /Mobile Canvus Menu -->

  <!-- /Header -->
  <header class="header_area">
    <div class="main_menu">
      <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class='navbar-brand' href='/'><img src="img/logo.png" srcset="img/logo-2x.png 2x" alt="" /></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav navbar-nav ml-auto">
              <li><a href='./index.php'>Inicio</a></li>
              <li class="dropdown submenu">
                <a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='./intro.php' role='button'>Documentación</a>
                <i class="las la-angle-down mobile_dropdown" aria-hidden="true" data-toggle="dropdown"></i>
                <ul class="dropdown-menu">
                  <li><a href='./intro.php'>Inicia Aquí</a></li>
                  <li><a href='./article.php'>Articulos</a></li>
                  <li><a href='./buttons.php'>Botones</a></li>
                  <li><a href='./image.php'>Imagenes</a></li>
                  <li class="active"><a href='./pagination.php'>Paginacion</a></li>
                  <li><a href='./changelog.php'>Registro de Cámbios</a></li>
                </ul>
              </li>
              <li class="dropdown submenu">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                  aria-expanded="false">Paginas</a>
                <i class="las la-angle-down mobile_dropdown" aria-hidden="true" data-toggle="dropdown"></i>
                <ul class="dropdown-menu">
                  <li><a href='./404.php'>404</a></li>
                  <li><a href='./articlev'>Articulos</a></li>
                  <li><a href='./login.php'>Login</a></li>
                  <li><a href='./register.php'>Registro</a></li>
                  <li><a href='./forget-password.php'>Olvidé password</a></li>
                  <li><a href='./faqs.php'>Faq</a></li>
                  <li><a href='./changelog.php'>Registro de Cámbios</a></li>
                  <li class="dropdown submenu">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                      aria-expanded="false">Sub menu
                      <i class="las la-angle-right mobile_dropdown" aria-hidden="true" data-toggle="dropdown"></i>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Menu 1</a></li>
                      <li><a href="#">Menu 2</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="dropdown submenu">
                <a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='./blog.php' role='button'>Blog
                </a>
                <i class="las la-angle-down mobile_dropdown" aria-hidden="true" data-toggle="dropdown"></i>
                <ul class="dropdown-menu">
                  <li><a href='./blog.php'>Blog</a></li>
                  <li><a href='./blog-deatail.php'>Detalles del Blog</a></li>
                </ul>
              </li>
              <li><a href='./contact.php'>Contacto</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="header-btn">
                <a href='/contact.php'><i class="las la-ticket-alt"></i>Crea un Ticket</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <div class="right_burger">
        <ul class="nav">
          <li>
            <div class="search_btn" data-toggle="modal" data-target="#exampleModal">
              <img src="img/icon/search.png" alt="" />
            </div>
          </li>
          <li>
            <div class="menu_btn">
              <img src="img/icon/menu.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </header>
    <!-- /Header -->

    <!-- Breadcrumb -->
    <section class="bg-half-150 d-table w-100 bg-light" style="background: url('img/bg/Breadcrumb.png') top center;">
        <!-- Container -->
        <div class="container">
            <!-- row -->
            <div class="row mt-5">
                <!-- col -->
                <div class="col-lg-12">
                    <div class="title-heading text-center text-md-center">
                        <h2>Pagination</h2>
                        <p class="mt-3 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <nav aria-label="breadcrumb" class="d-inline-block mt-4">
                            <ul class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href='/'>Docuto</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Pagination</li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <!-- col -->
            </div>
            <!-- row -->
        </div>
        <!-- Container -->
    </section>
    <!-- /Breadcrumb -->

    <!-- Pagination -->
    <section class="paginations pt-100 pb-50">
        <!-- Container -->
        <div class="container">
            <!-- row -->
            <div class="row justify-content-center">
                <!-- col -->
                <div class="col-lg-4">
                    <div class="sidebar-wrapper">
                        <div class="sidebar-widget">
                            <h4 class="sidebar-title">Doc Nav </h4>
                            <div class="sidebar-search sidebar-widget">
                                <div class="sidebar-search-form">
                                    <form action="#" method="post">
                                        <div class="form-group">
                                            <input type="search" name="search-field" placeholder="Search Now"
                                                required="">
                                            <button type="submit"><i class="ri-search-2-line"></i></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="sidebar-widget">
                            <div class="doc-nav">
                                <ul id="faq">
                                    <li> <a href='/intro'>Getting
                                            started</a></li>
                                    <li> <a href='/alerts'>Alerts</a> </li>
                                    <li> <a href='/buttons'>Buttons</a></li>
                                    <li> <a href='/image'>Image</a> </li>
                                    <li> <a href='/pagination'>Pagination</a> </li>
                                    <li> <a href='/colors'>Colors</a> </li>
                                    <li> <a href='/changelog'>Changelog</a> </li>
                                    <li> <a data-toggle="collapse" data-parent="#faq" href="#drop-down-menu-1">
                                            Menu levels 1 <i class="la la-angle-down"></i></a>
                                        <ul id="drop-down-menu-1" class="panel-collapse collapse">
                                            <li><a href="#intro">Menu 1 </a></li>
                                            <li><a href="#">Menu 2</a></li>
                                            <li><a href="#">Menu 3 </a></li>
                                        </ul>
                                    </li>
                                    <li> <a data-toggle="collapse" data-parent="#faq" href="#drop-down-menu-2">
                                            Menu levels 2 <i class="la la-angle-down"></i></a>
                                        <ul id="drop-down-menu-2" class="panel-collapse collapse">
                                            <li><a href="#intro">Menu 1 </a></li>
                                            <li><a href="#">Menu 2</a></li>
                                            <li><a href="#">Menu 3 </a></li>
                                        </ul>
                                    </li>
                                    <li> <a data-toggle="collapse" data-parent="#faq" href="#drop-down-menu-3">
                                            Menu levels 3<i class="la la-angle-down"></i></a>
                                        <ul id="drop-down-menu-3" class="panel-collapse collapse">
                                            <li><a href="#intro">Menu 1 </a></li>
                                            <li><a href="#">Menu 2</a></li>
                                            <li><a href="#">Menu 3 </a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- /col -->
                <!-- col -->
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Pagination</h3>
                        </div>
                        <div class="card-body">
                            <p class="bd-lead">Documentation and examples for showing pagination to indicate a
                                series of related content exists across multiple pages.</p>
                            <div class="example">
                                <nav aria-label="Page navigation example">
                                    <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>
                            </div>
                            <div class="code-toolbar">
                                <pre class=" language-markup">
    <code class="language-markup" id="copy">
<span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"Page navigation example"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
                                <div class="toolbar">
                                    <div class="toolbar-item"><span>Markup</span></div>
                                    <div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
                                            data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Working with icons</h3>
                        </div>
                        <div class="card-body">
                            <p>Looking to use an icon or symbol in place of text for some pagination links? Be
                                sure to provide proper screen reader support with <code
                                    class="highlighter-rouge">aria</code> attributes and the <code
                                    class="highlighter-rouge">.sr-only</code> utility.</p>
                            <div class="example">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Previous">
                                                <span aria-hidden="true">«</span>
                                                <span class="sr-only">Previous</span>
                                            </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="#" aria-label="Next">
                                                <span aria-hidden="true">»</span>
                                                <span class="sr-only">Next</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>

                            <div class="code-toolbar">
                                <pre class=" language-markup">
    <code class="language-markup" id="copy">
<span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"Page navigation example"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">aria-label=</span><span class="s">"Previous"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;laquo;</span><span class="nt">&lt;/span&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">aria-label=</span><span class="s">"Next"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;raquo;</span><span class="nt">&lt;/span&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
                                <div class="toolbar">
                                    <div class="toolbar-item"><span>Markup</span></div>
                                    <div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
                                            data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Disabled and active states</h3>
                        </div>
                        <div class="card-body">
                            <div class="bd-example">
                                <nav aria-label="...">
                                    <ul class="pagination">
                                        <li class="page-item disabled"><a class="page-link" href="#"
                                                tabindex="-1">Previous</a></li>
                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                        <li class="page-item active"><a class="page-link" href="#">2 <span
                                                    class="sr-only">(current)</span></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>
                            </div>
                            <div class="code-toolbar">
                                <pre class=" language-markup">
<code class="language-markup" id="copy">
    <span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item active"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
                                <div class="toolbar">
                                    <div class="toolbar-item"><span>Markup</span></div>
                                    <div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
                                            data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Alignment</h3>
                        </div>
                        <div class="card-body">
                            <p>Change the alignment of pagination components with <a
                                    href="http://getbootstrap.com/docs/4.1/utilities/flex/">flexbox
                                    utilities</a>.</p>
                            <div class="example">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item disabled"><a class="page-link" href="#"
                                                tabindex="-1">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>
                            </div>
                            <div class="code-toolbar">
                                <pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"Page navigation example"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination justify-content-center"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
                                <div class="toolbar">
                                    <div class="toolbar-item"><span>Markup</span></div>
                                    <div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
                                            data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
                                    </div>
                                </div>
                            </div>
                            <div class="example">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item disabled"><a class="page-link" href="#"
                                                tabindex="-1">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>
                            </div>
                            <div class="code-toolbar">
                                <pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"Page navigation example"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination justify-content-end"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
                                <div class="toolbar">
                                    <div class="toolbar-item"><span>Markup</span></div>
                                    <div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
                                            data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /col -->
            </div>
            <!-- /row -->
        </div>
        <!-- /Container -->
    </section>
    <!-- /Pagination -->

    <!-- /Newsletter -->
    <section class="newsletter-area pt-50">
        <!-- Container -->
        <div class="container">
            <!-- row -->
            <div class="row">
                <!-- col -->
                <div class="col-md-8 col-12 col-center">
                    <div class="newsletter" style="background-image: url(img/bg/newsletter-bg.jpg);">
                        <form action="#" method="POST">
                            <input type="email" class="news-email"
                                placeholder="Subscribe Newsletter (Enter Email Address)" />
                            <button type="submit" class="news-btn">Subscribe</button>
                        </form>
                    </div>
                </div>
                <!-- col -->
            </div>
            <!-- /row -->
        </div>
        <!-- /Container -->
    </section>
    <!-- /Newsletter -->

    <!-- Footer -->
    <footer class="footer-area" style="background-image: url(img/bg/map.png);">
        <!-- Container -->
        <div class="container text-center">
            <!-- row -->
            <div class="row">
                <div class="col-md-6 col-12 col-center">
                    <h1 class="footer-logo">Docuto</h1>
                    <p>Docuto is a Support &amp; Help Center Template to create
                        your own
                        24/7 self-service customer
                        support center.</p>
                </div>
            </div>
            <!-- /row -->
            <!-- col -->
            <div class="col-md-4 col-12 foot-divider col-center"></div>
            <!-- /col -->
            <ul class="social-link">
                <li><a href="#"><i class="ri-facebook-fill"></i></a></li>
                <li><a href="#"><i class="ri-instagram-line"></i></a></li>
                <li><a href="#"><i class="ri-twitter-line"></i></a></li>
                <li><a href="#"><i class="ri-youtube-line"></i></a></li>
            </ul>
            <p class="copyright-text">&copy; 2020 Docuto all right reserved designed by
                Aacvo
            </p>
        </div>
        <!-- /Container -->
    </footer>
    <!-- /Footer -->

    <!-- Back to top -->
    <div id="thetop"></div>
    <div id="backtotop">
        <a href="#" id="scroll">
            <i class="las la-chevron-up"></i>
        </a>
    </div>
    <!-- /Back to top -->

    <!-- Search Popup -->
    <div class="modal fade search_modal" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <img src="img/icon/close-white.png" alt="">
        </button>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Type here..."
                            aria-label="Recipient's username" aria-describedby="button-addon3">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="button-addon3"><i
                                    class="ri-search-2-line"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Search Popup -->

    <!-- JS -->

    <!-- Vendor Js -->
    <script src="js/vendors.js"></script>
    <!-- /Vendor js -->

    <!-- Plugins Js -->
    <script src="js/plugins.js"></script>
    <!-- /Plugins Js -->

    <!-- Main JS -->
    <script src="js/main.js"></script>
    <!-- /Main JS -->

    <!-- /JS -->

</body>

</html>