Placing chevron to the right - Navlist

Question

Hello I'm trying to implement the navlist that can be found at http://twitter.github.io/bootstrap/components.html#navs I've looked at the source code and I've tried using their code and my own:

        <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-tabs nav-stacked bs-docs-sidenav span8">
            <li><a href="#Variabler"><b>Variabler</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#Datatyper"><b>Datatyper</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#Funktioner"><b>Metoder</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#"><b>Arrays</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#"><b>Klasser</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>HTML5</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>CSS3</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>jQuery</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>AJAX</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>PHP</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>MySQL</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>Twitter Bootstrap</b><i class="icon-chevron-right"></i></a></li>
        </ul>
    </div>

The result I get is this:

How can I place the chevrons to the right? Tried paying around with offset but the chevrons would be positioned differently depending on how long the string is.

Answer 1

You can add the 'pull-right' class to the icons:

<ul class="nav nav-tabs nav-stacked bs-docs-sidenav span8">
  <li><a href="#Variabler"><b>Variabler</b><i class="icon-chevron-right pull-right"></i></a></li>
  <li><a href="#Datatyper"><b>Datatyper</b><i class="icon-chevron-right pull-right"></i></a></li>
  <li><a href="#Funktioner"><b>Metoder</b><i class="icon-chevron-right pull-right"></i></a></li>
  ...
</ul>

Demo: http://www.bootply.com/66221