Right align element in div class

Question

I am using angular 2 with Bootstrap 4 and Angular Material. However, I am having trouble right align the elements inside my container div. I want both my button and text to be aligned to the right hand side

Here is what the code that I have tried to produce the result as shown in the photo

<div class="container">
  <div class="pull-right">
    <p class="d-inline pull-right">Some text</p>
    <button type="button" class="btn btn-primary pull-right">+</button>
  </div>
</div>

I have also tried this solution from StackOverflow

<div class="container">
  <div class="asdf">
    <p class="d-inline pull-right">Some text</p>
    <button type="button" class="btn btn-primary pull-right">+</button>
  </div>
</div>

.asdf {
  margin-left:auto; 
  margin-right:0;
}

Both of these solutions does not move the elements to the right. What am I doing wrong?

score 23 · Accepted Answer · answered Feb 05 '17 at 14:30

I've removed the class pull-right class from both the button and the p tag and added text-right class to the div.container.

I think this is what you need.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div class="container text-right">
    <p class="d-inline">Some text</p>
    <button type="button" class="btn btn-primary d-inline">+</button>
</div>

Hey Sumesh. Works like a charm. This has been bother me for so long. What do you recommend to get this right? How did you find out what was the problem since Harekrishna mentioned the previous code works in the online editor but not my program (And I have confirmed that is indeed the case) — user172902, Feb 06 '17 at 05:55
Actually i don't know why your code didn't work. But the items with display:inline-block property is following the text-align of the parent element and can be aligned with respect to the parent element text-align property. — Sumesh S, Feb 06 '17 at 15:17

Carol Skelly · Answer 2 · 2021-07-20T11:51:34.537

Bootstrap 5 (update 2021)

Because of new RTL support, *-left and *-right classes have changed to *-start and *-end. Here are the Bootstrap 4 to Bootstrap 5 conversions:

float-left => float-start
float-right => float-end
ml-auto => ms-auto
mr-auto => me-auto

Bootstrap 4 (original answer)

In Bootstrap 4, pull-right has been replaced with float-right.

If float-right is not working, remember that Bootstrap 4 is now flexbox, and many elements are display:flex which can prevent float-right from working. In some cases, the utility classes like align-self-end or ml-auto work to right align elements that are inside a flexbox container like a Bootstrap 4 .row, Card or Nav. The ml-auto (margin-left:auto) is used in a flexbox element to push elements to the right.

Also, remember that text-right still works on inline elements.

Bootstrap 4 align right examples

score 3 · Answer 3 · answered Dec 30 '20 at 06:04

3

One simple way to handle to use the align option

<div class="col-sm-12" align="right">
        <button type="submit" class="btn btn-primary"><i class="fa fa-check-circle" aria-hidden="true"></i> Approve</button>

answered Dec 30 '20 at 06:04

Sunil Patil

31
3

score 0 · Answer 4 · edited Dec 24 '17 at 10:29

0

You are not doing anything wrong. Just copy and paste your code in any online bootstrap editor, you will get the right result. But you can write it in a more structured way

HTML code:

        <div class="container">
          <div class="row">
            <div class="col-md-12 .asdf">
              <button type="button" class="btn btn-primary pull-right">+</button>
              <p class="pull-right">Some text</p>
            </div>
          </div>
        </div>

CSS code

.asdf {
  margin-left:auto; 
  margin-right:0;
}

edited Dec 24 '17 at 10:29

ImAtWar

1,073
3
11
23

answered Feb 05 '17 at 10:53

Harekrishna Murari

69
1
4

2

The whole point of bootstrap is to avoid comment CSS like this. I suggest referring to their documentation for more inept usage of their tools. – jcaruso Nov 06 '18 at 21:56

Right align element in div class

4 Answers4

Linked

Related