Twitter Bootstrap Question posted in

Twitter Bootstrap 2 objects on the same row

I am learning how to use Twitter Bootstrap. I need to put two buttons in one row, one in the centre and the other to the right. The buttons are in the right positions column wise but they are in different rows.
Could anyone assist me with fixing my code below to get the two buttons on the same row?

<div class="row"> 
    <div class="col-sm-6">
        <p class="lead pull-right"><button class="btn btn-default ">Edit Button left</button></p>
    </div> 
    <div class="col-sm-6 col-sm-offset-6">
        <button class="btn btn-default lead pull-right ">Edit Button Right</button>
    </div>      
</div>
Tags:

2

Answers


  1. 0

    The problem is that on your second div class you use col-sm-offset-6. Delete this and it should align on the same row.

    Using offset will give you a left margin of 6 columns, and since your first div already use 6 columns, there arent enough columns on the same row.

    Login or Signup to reply.
  2. 0

    I agree with the above answer, here is the code from bootstrap page which has some fairly clear examples: http://getbootstrap.com/css/ 

    <div class="col-sm-9">
<div class="row">
  <div class="col-xs-8 col-sm-6">
    <p class="lead pull-right"><button class="btn btn-default ">Edit Button left</button></p>
  </div>
  <div class="col-xs-4 col-sm-6">
    <p class="lead pull-right"><button class="btn btn-default ">Edit Button Right</button></p>
  </div>
</div>

    It does leave a space between the buttons, I don’t know if you want that there or not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search