index.html

      <ul>
        <li class="prev disabled"><a href="">&larr; Previous</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 class="next"><a href="">Next &rarr;</a></li>
      </ul>
    </div>
    <div class="pagination">
      <ul>
        <li class="prev"><a href="">&larr; Previous</a></li>
        <li class="active"><a href="">10</a></li>
        <li><a href="">11</a></li>
        <li><a href="">12</a></li>
        <li class="disabled"><a href="">...</a></li>
        <li><a href="">19</a></li>
        <li><a href="">20</a></li>
        <li><a href="">21</a></li>
        <li class="next"><a href="">Next &rarr;</a></li>
      </ul>
    </div>
    <div class="pagination">
      <ul>
        <li class="prev"><a href="">&larr; Previous</a></li>
        <li><a href="">10</a></li>
        <li><a href="">11</a></li>
        <li><a href="">12</a></li>
        <li><a href="">13</a></li>
        <li><a href="">14</a></li>
        <li class="active"><a href="">15</a></li>
        <li><a href="">16</a></li>
        <li><a href="">17</a></li>
        <li><a href="">18</a></li>
        <li><a href="">19</a></li>
        <li><a href="">20</a></li>
        <li class="next"><a href="">Next &rarr;</a></li>
      </ul>
    </div>
<pre class="html">
&lt;div class="pagination"&gt;
  &lt;ul&gt;
    &lt;li class="prev disabled"&gt;&lt;a href=""&gt;&amp;larr; Previous&lt;/a&gt;&lt;/li>
    &lt;li class="active"&gt;&lt;a href=""&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;5&lt;/a&gt;&lt;/li&gt;
    &lt;li class="next"&gt;&lt;a href=""&gt;Next &amp;rarr;&lt;/a&gt;&lt;/li>
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
  </div>
</div>

</section>



<section id="alerts">
  <div class="page-header">
    <h1>Alerts &amp; Errors <small>Styles for success, warning, and error messages or alerts</small></h1>
  </div>
  <div class="row">
    <div class="span4 columns">
      <h2>Basic alerts</h2>
      <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
    </div>
    <div class="span12 columns">
      <div class="alert-message error">
        <a class="close" href="#">&times;</a>
        <p><strong>Oh snap!</strong> Change this and that and try again.</p>
      </div>
      <div class="alert-message warning">
        <a class="close" href="#">&times;</a>
        <p><strong>Holy gaucamole!</strong> Best check yo self, you're not looking too good.</p>
      </div>
      <div class="alert-message success">
        <a class="close" href="#">&times;</a>
        <p><strong>Well done!</strong> You successfully read this alert message.</p>
      </div>
      <div class="alert-message info">
        <a class="close" href="#">&times;</a>
        <p><strong>Heads up!</strong> This is an alert that needs your attention, but it's not a huge priority just yet.</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="span4 columns">
      <h2>Block messages</h2>
      <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
    </div>
    <div class="span12 columns">
      <div class="alert-message block-message error">
        <a class="close" href="#">&times;</a>
        <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
        <p><a class="btn small" href="#">Take This Action</a> <a class="btn small" href="#">Or Do This</a></p>
      </div>
      <div class="alert-message block-message warning">
        <a class="close" href="#">&times;</a>
        <p><strong>Holy gaucamole! This is a warning!</strong> Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        <p><a class="btn small" href="#">Take This Action</a> <a class="btn small" href="#">Or Do This</a></p>
      </div>
      <div class="alert-message block-message success">
        <a class="close" href="#">&times;</a>
        <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
        <p><a class="btn small" href="#">Take This Action</a> <a class="btn small" href="#">Or Do This</a></p>
      </div>
      <div class="alert-message block-message info">
        <a class="close" href="#">&times;</a>
        <p><strong>Heads up!</strong> This is an alert that needs your attention, but it's not a huge priority just yet.</p>
        <p><a class="btn small" href="#">Take This Action</a> <a class="btn small" href="#">Or Do This</a></p>
      </div>
    </div>
  </div>
</section>



      
    </div> <!-- /container -->

    <div id="footer">
      <div class="inner">
        <div class="container">
          <p>Copyright and all that stuff.</p>
        </div>
      </div>
    </div>

  </body>
</html>