Loading tray: drag left and right in the panel footer

Question

I have 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 pull-left and pull-right classes, so that each of them will move on both sides of the panel footer.

The float works, but now the buttons are outside the footer:

I tried using a grid instead of pull helpers, but I got the same result.

I also looked for a solution (this should be fairly common, I think) and did not find explanations that do not require overriding Bootstrap with custom css.

Is it possible to fix this with Bootstrap only or will I need to reset my own CSS to fix it?

Answer 1

Just add div with clearfix after buttons

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

Answer 2

Stalin's answer is correct, but you can use a different approach, more elegant

From Bootstrap Document ( #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 text-right class in the div panel

Answer 4

It seems strange to me that .panel-footer is not already included in the clearfix css library as .panel-body and even .modal-footer do. Instead of remembering to throw the clearfix class on any footer (if you have a lot, it might be a pain), it's better to just add clearfix css to .panel-footer in your main CSS or edit the library directly.

 .panel-footer:before, .panel-footer:after { display: table; content: " "; } .panel-footer:after { clear: both; }