Bootstrap: aligning two buttons on the same line

Question

Basically, I am trying to do this in order to get two buttons on the opposite side of the website, but on the same line. Here's what it looks like:

And here is the code for what I have:

<div class="panel-footer"><!-- panel-footer --> <div class="previous"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-chevron-left"></span> </button> </div> <div class="next"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div><!-- end panel-footer --> 

And here is the CSS for the previous and next classes.

 .previous { text-align: left; } .next { text-align: right; } 

Thanks. I use bootstrap if this helps.

Answer 1

Wrap them in two separate columns as follows:

 <div class="panel-footer row"><!-- panel-footer --> <div class="col-xs-6 text-left"> <div class="previous"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-chevron-left"></span> </button> </div> </div> <div class="col-xs-6 text-right"> <div class="next"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> </div><!-- end panel-footer --> 

By the way, you can use the built-in helper classes text-left / text-right, as I did in the div columns, so you don't need to add extra css. In this case, you can remove the extra divs you added.

Answer 2

I thought Bootstrap would automatically make this floating for you if you wrap it in div.row, since it is grid based?

 <div class="row"> <div class="pull-left"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-chevron-left"></span> </button> </div> <div class="pull-right"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> 

Answer 3

You can try what HaukurHaf said, it will work. Simple floating method.

Or you can also put these two .previous and .next divs in .col classes and then wrap them in a div string. Therefore, he will read:

 <div class="panel-footer"> <div class="row"> <div class="col-xs-6 previous"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-chevron-left"></span> </button> </div> <div class="col-xs-6 next"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> 

This way you follow the layout of the Bootstrap column.

Answer 4

You need to float divs containing buttons left and right. Since you are using Bootstrap, I recommend that you use the built-in classes .pull-right and .pull-left.

Give the previous div the .pull-left class, and the next div the pull-right class.

You may need to make the next button first in your HTML source.

You can also add float: left; to the existing .previous class and float: right; to the .next class.

Even better, just get rid of these previous / next divs and apply the pull-left / pull-right classes directly to the buttons.

Answer 5

Bootstrap 4 Answer

All of the answers above apply to Boostrap 3, so I am updating the answer.

Answer 6

I would use float in your css

 .previous { float: left; } .next { float: right; } 

You can check this parameter here jsfiddle .