title: How do you properly align right a toolbar in Bootstrap?
body: <p>When you have a toolbar with a few buttons and a drop down, <a href="https://jsfiddle.net/pupeno/9uym374g/1/" rel="noreferrer">like this one</a>:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="btn-toolbar" role="toolbar"&gt;
          &lt;div class="btn-group"&gt;&lt;a class="btn btn-default" role="button" href=""&gt;Invite People&lt;/a&gt;&lt;/div&gt;
          &lt;div class="btn-group"&gt;&lt;a class="btn btn-default" role="button" href=""&gt;Create Campaign&lt;/a&gt;&lt;/div&gt;
          &lt;div class="btn-group"&gt;&lt;a class="btn btn-default" role="button" href=""&gt;Edit&lt;/a&gt;&lt;/div&gt;
          &lt;div class="btn-group"&gt;
              &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;Action &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do you properly align it right? I tried pull-right on the toolbar as well as the button groups as well as one button group with pull-right containing all the buttons. None of those worked.</p>