Bootstrap 3 Right Alignment Button

Question

I am trying to correctly align a button in a grid:

I would like the button on the right to align with the text area above it.

My code looks something like this:

<div class="row">
    <div class="col-xs-2">
        Purchase Order
    </div>
    <div class="col-xs-10">
        <textarea />
        <textarea />
        <div class="row">
            <div class="col-xs-9">
                <button />
                <button />
            </div>
            <div class="col-xs-2">
                <button />
            </div>
        </div>
    </div>
</div>

I tried to add offsets and adjust the spacing of different columns ... the button is too far left or right. I tried to add a fixed margin on the left to the right button, this works, but it breaks the responsive design.

---

Note:

I can not use pull-right, it is deprecated in Bootstrap 3.

Answer 1

There are built-in styles. You can also create your own class .pull-right.

HTML

<div class="row">
    <div class="col-xs-2">
        Purchase Order
    </div>
    <div class="col-xs-10">
        <textarea class="form-control"></textarea>
        <button style="float: right">Button Right</button>
        <button>Button One</button>
        <button>Button Two</button>
    </div>
  </div>

Optional CSS

.pull-right {
    float: right !important; // Use of important emulates bootstrap
}

Answer 2

Bootstrap , . :

<button class="pull-right">Hello</button> 

Answer 3

:

<div class="row">
    <div class="col-xs-9">
        <button />
        <button />
    </div>
    <div class="col-xs-2">
        <button />
    </div>
</div>

... col-xs-9 col-cs-2 whitch, 12- . Mayby col-xs-9 col-xs-10 ? pull-right.

Answer 4

text-left text-right . Bootstrap 3, div.

JS Fiddle

<div class="row">
    <div class="col-xs-12">
        Purchase Order
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <textarea></textarea>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <textarea></textarea>
    </div>
</div>
<div class="row">
    <div class="col-xs-8 text-left">
        <button class="btn btn-primary">Save PO Tages & Notes</button>
        <button class="btn btn-default">Cancel</button>
    </div>
    <div class="col-xs-4 text-right">
        <button class="btn btn-primary">Add PO Notes to Calendar</button>
    </div>
</div>

. HTML, . , .