<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<header id="top">
<h2>Bootstrap Pagination as Directory</h2>
</header>
<div id="permafloater">
<ul><li><a href="#top" title="top">TOP</a></li>
<li><a href="#A" title="top">A-F</a></li>
<li><a href="#G" title="top">G-L</a></li>
<li><a href="#M" title="top">M-R</a></li>
<li><a href="#S" title="top">S-Z</a></li></ul>
</div>
<ul class="pagination pagination-sm">
<li ><a href='#0'>0</a></li><li ><a href='#1'>1</a></li><li ><a href='#2'>2</a></li><li ><a href='#3'>3</a></li><li ><a href='#4'>4</a></li><li ><a href='#5'>5</a></li><li ><a href='#6'>6</a></li><li ><a href='#7'>7</a></li><li ><a href='#8'>8</a></li><li ><a href='#9'>9</a></li><li class='active'><a href='#A'>A</a></li><li ><a href='#B'>B</a></li><li ><a href='#C'>C</a></li><li ><a href='#D'>D</a></li><li ><a href='#E'>E</a></li><li ><a href='#F'>F</a></li><li ><a href='#G'>G</a></li><li ><a href='#H'>H</a></li><li ><a href='#I'>I</a></li><li ><a href='#J'>J</a></li><li ><a href='#K'>K</a></li><li ><a href='#L'>L</a></li><li ><a href='#M'>M</a></li><li ><a href='#N'>N</a></li><li ><a href='#O'>O</a></li><li ><a href='#P'>P</a></li><li ><a href='#Q'>Q</a></li><li ><a href='#R'>R</a></li><li ><a href='#S'>S</a></li><li ><a href='#T'>T</a></li><li ><a href='#U'>U</a></li><li ><a href='#V'>V</a></li><li ><a href='#W'>W</a></li><li ><a href='#X'>X</a></li><li ><a href='#Y'>Y</a></li><li ><a href='#Z'>Z</a></li><li ><a href='#'>Home</a></li></ul>
<div class="col-lg-12 mh1" id="0"><span class="mark">0</span>
<p>php can be insterted here to call db for content as per each starting letter/number</p>
</div>
<div class="col-lg-12 mh1" id="1"><span class="mark">1</span></div>
<div class="col-lg-12 mh1" id="2"><span class="mark">2</span></div>
<div class="col-lg-12 mh1" id="3"><span class="mark">3</span></div>
<div class="col-lg-12 mh1" id="4"><span class="mark">4</span></div>
<div class="col-lg-12 mh1" id="5"><span class="mark">5</span></div>
<div class="col-lg-12 mh1" id="6"><span class="mark">6</span></div>
<div class="col-lg-12 mh1" id="7"><span class="mark">7</span></div>
<div class="col-lg-12 mh1" id="8"><span class="mark">8</span></div>
<div class="col-lg-12 mh1" id="9"><span class="mark">9</span></div>
<div class="col-lg-12 mh1" id="A"><span class="mark">A</span></div>
<div class="col-lg-12 mh1" id="B"><span class="mark">B</span></div>
<div class="col-lg-12 mh1" id="C"><span class="mark">C</span></div>
