Tables / Pagination

Used to show tabular data

First	Last	Handle
Mark	Otto	mdo
Jacob	Thornton	fat
Larry	the Bird	twitter

Total: 1000

Table Code Example


        <table class="table">

          <thead>

                    
        <tr>

                          
        <th>First</th>

                          
                    <th>Last</th>

                          
        <th>Handle</th>

                        
        </tr>

                  
        </thead>

              
        <tbody>

                  
          <tr>

              <td>Mark</td>

                          
        <td>Otto</td>

                      
                        
        <td>mdo</td>

                      
                      
        </tr>

                  
                  
        <tr>

                          
        <td>Jacob</td>

                          
        <td>Thornton</td>

                          
        <td>fat</td>

                        
        </tr>

                  
          <tr>

                          
        <td>Larry</td>

                          
        <td>the Bird</td>

            
          <td>twitter</td>

                      
          </tr>

                  
        </tbody>

        </table>

Pager Code Example


        <ul class="pagination">

          <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="1">

              <span class="icon icon-xs align-text-bottom icon-arrow-triangle-left-pagination-brown"></span>

                        
        </button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="149">

              <span class="icon icon-xs align-text-bottom icon-arrow-triangle-left-brown"></span>

                        
        </button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="50">- 100</button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="140">- 10</button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="148">148</button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="149">149</button>

          </li>

              
        <li class="page-item active">

            <button type="submit" class="page-link" name="PageNumber" value="150">150</button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="151">151</button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="152">152</button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="153">153</button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="160">+ 10</button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="250">+ 100</button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="151">

              <span class="icon icon-xs align-text-bottom icon-arrow-triangle-right-brown"></span>

                        
        </button>

                  
        </li>

              
        <li class="page-item">

            <button type="submit" class="page-link" name="PageNumber" value="1000">

              <span class="icon icon-xs align-text-bottom icon-arrow-triangle-right-pagination-brown"></span>

                        
        </button>

                  
        </li>

              
        <li class="page-item">

            <input type="number" placeholder="PAGE#" name="PageNumber" class="form-control" min="1" max="1000">

                  
        </li>

        </ul>