Bootstrap's pull-right class

Question

<th>Cars <i class="fa fa-sort-asc pull-right"></i></th>

When I am using bootstrap's pull-right class, it aligns the icon in my th to the top right corner, and removing pull-right aligns the icon centered vertically to the left, but is there a way so that when I use pull-right it's aligned in the center vertically to the right?

I am using bootstrap and icons from fontawesome

why do you want absolutely to use the `pull-right`if without it you get the rendering you want ? — ylerjen, Apr 23 '15 at 12:19
I am using bootstrap, and I am meaning the element inside the th if that was misunderstood, the is automatically aligned in the center vertically when I am not using the pull-right class. But using pull-right puts it in the top right corner — Christian Caspovich, Apr 23 '15 at 12:20
I want to use pull-right so the icon is on the right side of the th — Christian Caspovich, Apr 23 '15 at 12:20
Take a look at: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — Dagriel, Apr 23 '15 at 12:24

Carol Skelly · Accepted Answer · 2018-04-08T12:38:20.747

5

You can use pull-left on the span instead..

<th class="text-right">
     <span class="pull-left">First Name</span>
     <i class="fa fa-sort-asc"></i>
</th>

http://codeply.com/go/DIWtVsyMwh

In Bootstrap 4, pull-left is now float-left, and pull-right is now float-right

edited Apr 08 '18 at 12:38

answered Apr 23 '15 at 14:31

Carol Skelly

351,302
90
710
624

1

Score for the bootstrap 4 changes ;-) – Stefan Nov 04 '18 at 12:58

score 0 · Answer 2 · answered Apr 23 '15 at 13:57

You could have the icon on the right and vertically aligned with the text like this:

HTML

<th>
  <div class="header-with-icon">
    <div>First Name</div>
    <div class="text-right"><i class="fa fa-sort-asc"></i></div>
  </div>
</th>

CSS

.header-with-icon{
  display: table;
  width: 100%;
}

.header-with-icon > div{
  display: table-cell;
}

Here's a bootply example: http://www.bootply.com/Df5JpMyU2k

Bootstrap's pull-right class

2 Answers2