CODEWITHSUNDEEP
twitter-bootstrap
Rishabh Sharma
Rishabh Sharma

Reputation: 113

pull-right not right aligning my buttons

I want to align all three buttons to the right. I am using pull-right to bring this effect, but it's not even budging this buttons a pixel. What is wrong in this code?

<div class="row">
        <div class="col-md-2">
            <button type="button" class="btn btn-block btn-primary pull-right" ng-click="reset()">Reset</button>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-block btn-primary pull-right" ng-click="goNext('/login')">Cancel</button>
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-block btn-primary pull-right">Register</button>
        </div>
    </div>

Note: I don't want to use any javascript or jquery code to bring this effect

Upvotes: 0

Views: 519

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

You are probably looking for something like this - this creates a single large column spanning the entire available width of the row and the pull-right moves all buttons to the right, this will move Reset to the extreme right

<div class="row">
    <div class="col-xs-12 col-md-12">
        <button type="button" class="btn btn-primary pull-right" ng-click="reset()">Reset</button>
        <button type="button" class="btn btn-primary pull-right" ng-click="goNext('/login')">Cancel</button>
        <button type="submit" class="btn btn-primary pull-right">Register</button>
    </div>
</div>

This retains the order - the difference is that now we use a text-right on the wrapper cell to move everything to the righ

<div class="row">
    <div class="col-xs-12 col-md-12 text-right">
        <button type="button" class="btn btn-primary" ng-click="reset()">Reset</button>
        <button type="button" class="btn btn-primary" ng-click="goNext('/login')">Cancel</button>
        <button type="submit" class="btn btn-primary">Register</button>
    </div>
</div>

Now, if you want blocks (that stretch 2 columns), you have to use column offsets instead of a float or an align to move the buttons to the right

<div class="row">
    <div class="col-md-offset-6 col-md-2">
        <button type="button" class="btn btn-block btn-primary" ng-click="reset()">Reset</button>
    </div>
    <div class="col-md-2">
        <button type="button" class="btn btn-block btn-primary" ng-click="goNext('/login')">Cancel</button>
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-block btn-primary">Register</button>
    </div>
</div>

Upvotes: 1

Related Questions