3.3. Letter Navigation

Letter navigation is made for use with long listings.

Example

A

A very long listing…

B

Another very long listing…

C

Yet another very long listing…

<div class="row">
    <div class="col-sm-2 col-sm-push-10">
        <ul class="nav nav-letters">
            <li><a href="#letter-a">A</a></li>
            <li><a href="#letter-b">B</a></li>
            <li><a href="#letter-c">C</a></li>
        </ul>
    </div>
    <div class="col-sm-10 col-sm-pull-2">
        <h3 id="letter-a">A</h3>
        <p>A very long listing…</p>
        <h3 id="letter-b">B</h3>
        <p>Another very long listing…</p>
        <h3 id="letter-c">C</h3>
        <p>Yet another very long listing…</p>
    </div>
</div><!-- .row -->