Bootstrap: Aligning two buttons on the same row - css

Question

Basically what I'm attempting to do it to get two buttons on the opposite side of the website but on the same row. Here's what it looks like:
And here's 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's the CSS for the classes 'previous' and 'next'.
.previous {
text-align: left;
}
.next {
text-align: right;
}
Thanks. I'm using bootstrap if that helps.

Answer 1

Wrap them in two separate columns like this:
<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 like I've done on the column divs so you don't need to add the extra css. In that case you can remove the extra divs you've added.

Answer 2

I thought Bootstrap automatically does this floating for you if you wrap it in the div .row since it's based on a grid?
<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

Bootstrap 4 Answer
The above answers are all Boostrap 3 specific, so I'm updating the accepted answer.
Glyphicons don't exist in Bootstrap 4, so you'll have to use something like Font Awesome
<div class="row">
<!-- panel-footer -->
<div class="col-6 text-left">
<div class="previous">
<button type="button" class="btn btn-default btn-lg">
<!--No glyphicons in Bootstrap 4. Insert icon of choice here-->
<span class=""></span>
</button>
</div>
</div>
<div class="col-6 text-right">
<div class="next">
<button type="button" class="btn btn-default btn-lg">
<span class=""></span>
</button>
</div>
</div>
</div>

Answer 4

You can try what HaukurHaf said, it will work. Simple floating method.
Or you can also put those two .previous and .next divs in .col- classes and then wrap them in a row div. So it would 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 your are following Bootstrap's column layout.

Answer 5

Another way is to use flexbox:
<div class="flexbuttons">
<button></button>
<button></button>
</div>
<style>
.flexbuttons{
display:flex;
justify-content: space-between;
}
</style>

Answer 6

I would use float in your css
.previous {
float: left;
}
.next {
float: right;
}
You can test this option here jsfiddle.

Answer 7

You need to float the divs containing the buttons to the left and right. Since you are using Bootstrap, I recommend that you use the built in .pull-right and .pull-left classes.
Give the previous div the .pull-left class and the next div the pull-right class.
You might have to make the next button come first in your html source.
You could also just add float:left; to your existing .previous class and float:right; to the .next class.
Better yet, just get rid of those previous/next divs and apply the pull-left/pull-right classes directly to the buttons.

Answer 8

2020+ Updated answer:
Bootstrap classes flex-box and justify-content
Font-awesome icons instead of glyphicons (Not in Bootstrap 4)
<div class="d-flex justify-content-between">
<button class="btn btn-primary btn-sm">
<i class="fas fa-arrow-left" aria-hidden="true"></i>
</button>
<button class="btn btn-primary btn-sm">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</button>
</div>