Align pagination widget

How to align twitter bootstrap paginatin widget when it is inside a panel?

by opensas

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <div class="container-fluid theme-showcase" role="main">

      <div class="row">

        <div class='panel panel-default'>
          <div class="panel-heading">My panel with text-align (nothing happens)</div>

          <ul id="aligned" class="pagination">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>

        </div> <!-- /panel panel-default -->

      </div>

      <hr />

      <div class="row">

        <div class='panel panel-default'>
          <div class="panel-heading">My panel eith left and right margin set to auto (nothing happens)</div>

          <ul id="auto-margin" class="pagination">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>

        </div> <!-- /panel panel-default -->

      </div>

      <hr />

      <div class="row">

        <div class='panel panel-default'>
          <div class="panel-heading">My panel floating to the right (pagination falls out of the panel)</div>

          <ul id="floated" class="pagination">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>

        </div> <!-- /panel panel-default -->

      </div>

      <hr />

      <div class="row">

        <div class='panel panel-default'>
          <div class="panel-heading">My panel with then html tag align=right (same as float)</div>

          <div align="right">
          <ul class="pagination">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li...

CSS

ul#aligned {
        text-align: right;
    }
    ul#auto-margin {
        margin-left: auto;
        margin-right: auto;
    }
    ul#floated {
        float: right;
    }