CODEWITHSUNDEEP
csstwitter-bootstrap
user3727561
user3727561

Reputation: 175

Bootstrap: Aligning two buttons on the same row

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: enter image description here

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.

Upvotes: 16

Views: 80322

Answers (9)

Collei Inc.
Collei Inc.

Reputation: 76

Use justify-content-between

    <div class="panel-footer row justify-content-between">
        <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>

Upvotes: 0

Jeff Spicoli
Jeff Spicoli

Reputation: 500

2020+ Updated answer:

<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>

Upvotes: 0

Djinn
Djinn

Reputation: 9

Another way is to use flexbox:

<div class="flexbuttons">
<button></button>
<button></button>
</div>
    
<style>
.flexbuttons{
  display:flex;
  justify-content: space-between;
}
</style>

Upvotes: 1

Kellen Stuart
Kellen Stuart

Reputation: 8895

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>

Upvotes: 4

EdwardM
EdwardM

Reputation: 1146

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.

Upvotes: 1

HaukurHaf
HaukurHaf

Reputation: 13796

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.

Upvotes: 0

walexnelson
walexnelson

Reputation: 424

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>

Upvotes: 6

jme11
jme11

Reputation: 17374

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.

Upvotes: 20

user3648203
user3648203

Reputation: 65

I would use float in your css

.previous {
float: left;
}

.next {
float: right;
}

You can test this option here jsfiddle.

Upvotes: 0

Related Questions