title: How to display input buttons on one line in Bootstrap?
body: <p>I've made a small little Bootstrap panel, and I have 3 Bootstrap buttons in the panel at the bottom. What I'm trying to do is make all the buttons be on one line and have a small gap, not bunched together. Here's what I have right now, and here's what it's doing:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.recent 
  {
      margin-top: 50px;
      margin-right: 500px;
  }
  
  .recent input
  {
      float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div class="recent"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="col-lg-3"&gt;
                          &lt;div class="panel panel-primary"&gt;
                              &lt;div class="panel-heading"&gt;&lt;center&gt;&lt;span class="label label-danger"&gt;Recent&lt;/span&gt;&lt;/center&gt;&lt;/div&gt;
                              &lt;div class="panel-body"&gt;
                                  &lt;p&gt;- Aurora, Colorado : Blah Blah Blah&lt;/p&gt;
                                  &lt;input type="button" value="View all" onClick="#" class="btn btn-primary"&gt;
                                  &lt;input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger"&gt;
                                  &lt;input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What's happening is this:</p>
  
  <p><a href="https://i.stack.imgur.com/sMZxs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sMZxs.png" alt="Screenshot of three buttons where the first two are right next to each other and the third one is below them."></a></p>
  
  <p><a href="https://gyazo.com/46b7c219adc26be516475c8f3b4d803d" rel="nofollow noreferrer">https://gyazo.com/46b7c219adc26be516475c8f3b4d803d</a></p>
  
  <p>Is there any way to make them stay on one line, or would I have to make the column larger?</p>