<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> <!------ Include the above in your HEAD tag ----------> <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> <div class="col-lg-12 mh1" id="D"><span class="mark">D</span></div> <div class="col-lg-12 mh1" id="E"><span class="mark">E</span></div> <div class="col-lg-12 mh1" id="F"><span class="mark">F</span></div> <div class="col-lg-12 mh1" id="G"><span class="mark">G</span></div> <div class="col-lg-12 mh1" id="H"><span class="mark">H</span></div> <div class="col-lg-12 mh1" id="I"><span class="mark">I</span></div> <div class="col-lg-12 mh1" id="J"><span class="mark">J</span></div> <div class="col-lg-12 mh1" id="K"><span class="mark">K</span></div> <div class="col-lg-12 mh1" id="L"><span class="mark">L</span></div> <div class="col-lg-12 mh1" id="M"><span class="mark">M</span></div> <div class="col-lg-12 mh1" id="N"><span class="mark">N</span></div> <div class="col-lg-12 mh1" id="O"><span class="mark">O</span></div> <div class="col-lg-12 mh1" id="P"><span class="mark">P</span></div> <div class="col-lg-12 mh1" id="Q"><span class="mark">Q</span></div> <div class="col-lg-12 mh1" id="R"><span class="mark">R</span></div> <div class="col-lg-12 mh1" id="S"><span class="mark">S</span></div> <div class="col-lg-12 mh1" id="T"><span class="mark">T</span></div> <div class="col-lg-12 mh1" id="U"><span class="mark">U</span></div> <div class="col-lg-12 mh1" id="V"><span class="mark">V</span></div> <div class="col-lg-12 mh1" id="W"><span class="mark">W</span></div> <div class="col-lg-12 mh1" id="X"><span class="mark">X</span></div> <div class="col-lg-12 mh1" id="Y"><span class="mark">Y</span></div> <div class="col-lg-12 mh1" id="Z"><span class="mark">Z</span></div> <div class="col-lg-12 mh1" id=""><a href="#top" title="top">Home</a> <p>This is a faux footer</p> </div>

body { width: 90%; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-weight: normal; line-height: normal; margin: 1em auto; padding: 1.25em; } #permafloater{float:right;display: block;width: 42px; height: 98px;background-image:linear-gradient(#fcccbb, #c8e8c8, #aaccdd);text-align: center; border:1px solid #038;border-radius:5px 0 0 5px;position:fixed; right:0; top: 44%;}#permafloater ul{list-style: none;margin:1px; padding: 0;} p { color: #222; line-height: 1.486; }.mh1{margin-bottom: 2px;padding:10px;min-height: 120px; display: block;}.mh1:nth-of-type(even) {background:#f3fafa;}.mark{background: #fafafa; min-width: 24px; width: auto; max-width: 24px; height: 24px;display: block;position: relative; top: -8px; left: -8px; box-shadow: 0 1px 1px #888;text-align: center;}