Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 881
user3727561 Avatar asked Jun 30 '14 22:06

user3727561


2 Answers

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.

like image 55
jme11 Avatar answered Sep 20 '22 12:09

jme11


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>
like image 39
walexnelson Avatar answered Sep 18 '22 12:09

walexnelson