CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
John S
John S

Reputation: 8331

proper way to right align buttons on a bootstrap based web form?

I have a web form that is using the Bootstrap framework.

I would like to right align the "Save" & "Cancel" buttons when the form is displayed on a full size screen.

What is the proper way to do this using Bootstrap 3 css?

 <div class="row">
        <div class="col-md-9">
            <input type="reset" value="Cancel" class="btn btn-default btn-danger" />
        </div><div class="col-md-3">
            <input type="submit" value="Save" class="btn btn-default btn-success" />
        </div>
    </div>

Upvotes: 1

Views: 1456

Answers (4)

aliawadh980
aliawadh980

Reputation: 468

Try this:

<div class="modal-footer">
    <button type="button" class="btn btn-danger">Cancel</button>
    <button type="submit" class="btn btn-success">Save</button>
</div>

Upvotes: 0

Josh Mountain
Josh Mountain

Reputation: 1950

<div class="row">
    <div class="col-md-9">
        <input type="reset" value="Cancel" class="btn btn-default btn-danger pull-right" />
    </div><div class="col-md-3">
        <input type="submit" value="Save" class="btn btn-default btn-success pull-right" />
    </div>
</div>

You need to add the pull-right helper class.

Docs: http://getbootstrap.com/css/#helper-classes-floats

Upvotes: 3

Wilf
Wilf

Reputation: 2315

Let's try this:

 <div class="row">
        <div class="col-md-9">
            <input type="reset" value="Cancel" class="btn btn-default btn-danger pull-right" />
        </div><div class="col-md-3">
            <input type="submit" value="Save" class="btn btn-default btn-success pull-right" />
        </div>
    </div>

Just put pull-right in the class to make it right align. Note that if you want to re-order the button just put the right-most on the upper line.

Upvotes: 2

Reflic
Reflic

Reputation: 1421

Try using one of the helper classes of Bootstrap for floating of objects. You can use .pull-left for float:left; or .pull-right for float:right;

This should align the buttons correctly on the right side and with the right paddings.

Source: Bootstrap Documentation

Upvotes: 1

Related Questions