Bootstrap: pull left and right in panel footer breaks footer

Question

I have a a Bootstrap panel with two buttons in the footer:

    <div class="panel-footer">
        {{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }}
            {{ Form::submit("Edit", array('class' => 'btn btn-default')) }}
        {{ Form::close() }}
        {{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }}
            {{ Form::submit("Delete", array('class' => 'btn btn-default')) }}
        {{ Form::close() }}
    </div>

The forms for each of the buttons have the class pull-left and pull-right so that they are each floated to either side of the panel footer.

The float is working, but the buttons are now outside of the footer:

I tried using the grid system instead of the pull helpers but I ended up with the same result.

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.

Is it possible to fix this with just Bootstrap or would I need to throw my own css in to fix it?

Answer 1

Just add a div with clearfix after the buttons

<div class="clearfix"></div>

Answer 2

stalin's answer is correct, but you can use another approach that is more elegant

From Bootstrap Documentation (#clearfix)

Easily clear floats by adding .clearfix to the parent element.

Just add clearfix to the parent div:

<div class="panel-footer clearfix">
    {{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }}
        {{ Form::submit("Edit", array('class' => 'btn btn-default')) }}
    {{ Form::close() }}
    {{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }}
        {{ Form::submit("Delete", array('class' => 'btn btn-default')) }}
    {{ Form::close() }}
</div>

Answer 3

just add the class text-right on the panel-footer div