title: Align buttons in Bootstrap
body: <p>Within my current template I am using Bootstrap and it should contain three buttons where each should be positioned respectively. The first one all the way to the left, the second one in the middle and the third (final) one to (all the way to) the right (within a container element).</p>
  
  <p>When I am trying to achieve this with Bootstrap, I happen not to find anything concerning my need. This is because everytime I try to wrap a <code>&lt;div&gt;</code> tag around the input elements, the HTML document will show these on seperate rows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.foo {
    width: 23%;
    /*Should be the width required by the button,
    but I just took a random number that fits
    best. */
    margin: 0 auto;
  }
  /*This is how it should look like, however
  I want to make use of Bootstrap instead of custom positon css if
  possible. */
  
  .desired {
    position: absolute;
    left: 10%;
  }
  .desired div {
    width: 10%;
    text-align: center;
    display: inline-block;
  }
  .example2 {
    /*Center second element*/
    position: absolute;
    left: 50%;
    margin-left: -5%;
  }
  .example3 {
    position: absolute;
    right: 0%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;I tried using the following HTML/CSS:
  &lt;!--What I tried doing using Bootstrap: --&gt;
  &lt;div class="container"&gt;
    &lt;input type="submit" class="btn btn-default" value="Foo"&gt;
    &lt;input type="submit" class="btn btn-default" value="Test"&gt;
    &lt;input type="submit" class="btn btn-default pull-right" value="Bar"&gt;
  &lt;/div&gt;
  
  &lt;br&gt;And got to a result that looks something like this:
  &lt;div class="container"&gt;
    &lt;input type="submit" class="btn btn-default" value="Foo"&gt;
    &lt;div class="foo"&gt;
      &lt;input type="submit" class="btn btn-default" value="Test"&gt;
    &lt;/div&gt;
    &lt;input type="submit" class="btn btn-default pull-right" value="Bar"&gt;
  &lt;/div&gt;
  
  &lt;br&gt;And this:
  &lt;div class="container"&gt;
    &lt;input type="submit" class="btn btn-default" value="Foo"&gt;
    &lt;div class="text-center"&gt;
      &lt;input type="submit" class="btn btn-default" value="Test"&gt;
    &lt;/div&gt;
    &lt;input type="submit" class="btn btn-default pull-right" value="Bar"&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  
  &lt;!-- What it looks like I want to achieve --&gt;
  I want the elements to look similar to:
  &lt;div class="container desired"&gt;
    &lt;div class="example1"&gt;
      &lt;input type="submit" class="btn btn-default" value="Foo"&gt;
    &lt;/div&gt;
    &lt;div class="example2"&gt;
      &lt;input type="submit" class="btn btn-default" value="Test"&gt;
    &lt;/div&gt;
    &lt;div class="example3"&gt;
      &lt;input type="submit" class="btn btn-default" value="Bar"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Is it possible to align buttons with the use of Bootstrap classes? --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If this snippet does not show well, this is due to positioning in percentages, so try to view it in full page if necessary.</p>
  
  <p>So my question is: Is it possible to use Bootstrap to align buttons within a document, even when I want these to be placed on the same horizontal line (or row)?</p>
  
  <p>Thanks in advance.</p>