CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3alignment
Sharikov Vladislav
Sharikov Vladislav

Reputation: 7269

How to right align element using bootstrap 3.0?

I need to put element to the right side of page.

This element:

element

To the right side of page. Like this:

enter image description here

I found only pull-right helper class, but I have been realizing, it wouldn't help me, because it based on float. So I started research and first result in google is this result. It says, that I should use pull-right. Well, I tried...

I tried this:

<a href="#" class="btn btn-default btn-lg pull-right" role="button"><span class="glyphicon glyphicon-plus"></span> Создать заказ</span></a>

I got this obvious result:

enter image description here

You can see that third heading in upper row is displaced.

So what exactly I need to do right align any element using bootstrap api?

I understand, that I can search how to center/left/right div and I will find some working results, but it will be not bootstrap solution.

Upvotes: 3

Views: 7236

Answers (1)

Emre Doğan
Emre Doğan

Reputation: 147

I think your answer is ".pull-right" class. You may look at it Bootstrap 3 Documentation Helper Classes. I think you can use 2 methods for this.

1) For amateurs :

<div class="col-sm-8"></div> /*Empty div for left alignment*/
<div class="col-sm-4"><div class="btn btn-default">Your Text on Button</div></div> /*This is your button*/

After this code you can use your headings. I mean your button and your heading have to apart from each other.

But as I said this is really terrible for you. And I think it will occur some problem for responsive design.

2)This is for pro Bootstrappers

<div class="col-xs-12"><div class="btn btn-default pull-right>Your Button Text</div></div>

Again after this code you can use your headings. I mean your button and your heading have to apart from each other. You should have to get attention on ".pull-right" class. You just use it on the right place.

I think this will be work for you!

Maybe you want to look at it : How can I get my Twitter Bootstrap buttons to right align?

Upvotes: 4

Related Questions