How to right align element using bootstrap 3.0?

Question

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.

score 4 · Accepted Answer · edited May 23 '17 at 10:33

4

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?

edited May 23 '17 at 10:33

Community

1
1

answered Jun 15 '14 at 11:54

Emre Doğan

137
2
11

This helped me and will be accepted anyway, but I have just one question: is it neccessary to use to div's? Or can I use `div` and put `a` in it with classes `btn btn-default pull-right`? – Sharikov Vladislav Jun 15 '14 at 12:13
If you want to not change your position of headings. You may look for **position:absolute** or **position:fixed** css properties. Your problem may not be about Bootstrap... – Emre Doğan Jun 15 '14 at 12:16
You can insert a tag inside of div. It can occur some problem if you use `.pull-right` class for **a** tag. I mean you can use that : `
Your Sexy Button Text
` – Emre Doğan Jun 15 '14 at 12:19
I have this now: [source (77-79 lines)](https://bitbucket.org/SharikovVladislav/juri-sus-help/src/3e8a83c4729542b5c00979d6f975a381abb1b9f8/www/index.php?at=master#cl-77). Will this cause problems? – Sharikov Vladislav Jun 15 '14 at 12:20
I cannot access that link you can send me as email... [email protected] or use jsfiddle – Emre Doğan Jun 15 '14 at 12:30
[This](http://jsfiddle.net/aVBhL/) is jsfiddle. I didn't include bootstrap files, so it is simple output, but I want to show you code, not result of this code. – Sharikov Vladislav Jun 15 '14 at 13:03
You can use it : http://jsfiddle.net/emredoganm/6DDhL/ Maybe you want to test what you think :-) – Emre Doğan Jun 15 '14 at 17:05

How to right align element using bootstrap 3.0?

1 Answers1