Search code examples
csstwitter-bootstraptwitter-bootstrap-3bootstrap-table

Align button group


I use bootstrap 3. I have an bootstrap-table, on top of it, i have a button group i would like to align to the right of the table. Actually is a the left

http://jsfiddle.net/65uckof7/

  <div id="toolbar" class="btn-group">
      <button class="btn btn-primary">
        Actions
      </button>
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right">
          <li>
              <a href="#">Anuler</a>
          </li>
          <li>
              <a href="#">Sauvegarder</a>
          </li>
          <li class="dropdown dropdown-submenu"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Payez</a>
              <ul class="dropdown-menu">
                  <li><a href="#">Comptant</a></li>
                  <li><a href="#">Débit</a></li>
                  <li><a href="#">Chèque</a></li>
              </ul>
          </li>
      </ul>
  </div>

Solution

  • Do you want the action button to be on the right?

    If that's the case from your fiddle I just had to add the following CSS rule:

    .fixed-table-toolbar .pull-left {
        float: right !important;
    }
    

    You need this because from the CSS on the fiddle the class .pull-left (the one which contains the buttons) is set to: float: left !important; so you just need to set it to right with the CSS I've provided