title: Bootstrap: pull left and right in panel footer breaks footer
body: <p>I have a a Bootstrap panel with two buttons in the footer:</p>
  
  <pre><code>    &lt;div class="panel-footer"&gt;
          {{ Form::open( array('route' =&gt; array('dogs.edit', $dog-&gt;id), 'method' =&gt; 'get', "class" =&gt; 'col-lg-6 ')) }}
              {{ Form::submit("Edit", array('class' =&gt; 'btn btn-default')) }}
          {{ Form::close() }}
          {{ Form::open( array('route' =&gt; array('dogs.destroy', $dog-&gt;id), 'method' =&gt; 'delete', "class" =&gt; 'col-lg-6 ')) }}
              {{ Form::submit("Delete", array('class' =&gt; 'btn btn-default')) }}
          {{ Form::close() }}
      &lt;/div&gt;
  </code></pre>
  
  <p>The forms for each of the buttons have the class <code>pull-left</code> and <code>pull-right</code> so that they are each floated to either side of the panel footer. </p>
  
  <p>The float is working, but the buttons are now outside of the footer:</p>
  
  <p><img src="https://i.stack.imgur.com/72ReB.png" alt="enter image description here"></p>
  
  <p>I tried using the grid system instead of the pull helpers but I ended up with the same result. </p>
  
  <p>I've also searched around for the solution (this has to be pretty common I would think) and haven't found an explanation that doesn't require overriding Bootstrap with custom css. </p>
  
  <p>Is it possible to fix this with just Bootstrap or would I need to throw my own css in to fix it?</p>