Pagination as Wizard

by agib

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div class="pagination">
              <ul>
                <li class="disabled"><a href="#">«</a></li>
                <li class="active"><a href="#">Betalingsmetoder</a></li>
                <li><a href="#">Beløb</a></li>
                <li><a href="#">Formularintegration</a></li>
                <li><a href="#">Aktivering</a></li>
                <li><a href="#">»</a></li>
              </ul>
            </div>



<ul class="breadcrumb" style="margin-bottom: 5px;">
              <li><a href="#">Betalingsmetoder</a> <span class="divider">→</span></li>
              <li><a href="#">Beløb</a> <span class="divider">→</span></li>
              <li class="active">Formularintegration <span class="divider">→</span></li>
    <li>Aktivering</li>
            </ul>

CSS

div.pagination > ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

/*
.pagination ul > li {
    float: none;
    display: table-cell;
    width: 100%;
    text-align: center;
}*/

.pagination ul > li > a {
    display: table-cell;
    float: none;
    width: 100%;
}