text-center and text-right not working in bootstrap

Question

I want some elements on my page to align to the center and right, but the bootstrap classes 'text-right' and 'text-center' don't seem to work, even though 'text-left' does.

Thanks.

<div class="container-fluid">
    <div class="row text-center" id="header">
        <div class="col-xs-12">
            <div class="container" style="padding-left:30px; padding-right:30px;">
                <div class="col-xs-2 text-left" id="mainLogo">
                    <a href="/"><img src="/stylesheet/main_logo.png" ></a>
                </div>

                <div class="col-xs-6 text-right">
                    <ul class="nav nav-pills">
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                                <span class="glyphicon glyphicon-user"></span> Account <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li id="ctl00">
                                    <a href="/account/">Your Account</a>
                                </li>
                                <li id="user">
                                    <a href="/profile/">Profile</a>
                                </li>
                                <li id="panel">
                                    <a href="/shop/reviewbasket/">Basket</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="col-xs-4 text-right">
                    <div id="search">
                 </div>     
                </div>
                </div>
            </div>
        </div>
    </div>

You should be able to use your browser's developer console (the "inspector") to see the style rules that are being applied, and where the breakdown is taking place. `text-right` and `text-center` do work, but may not at such a high level. You likely need to put it on each `a` within your nav ul — random_user_name, Aug 03 '16 at 14:27
I think it is working, refer to this fiddle https://jsfiddle.net/f0wL18zy/ hello is in center — Girdhari Agrawal, Aug 03 '16 at 14:33
For future readers using Bootstrap 5 see: https://stackoverflow.com/questions/18672452/left-align-and-right-align-within-div-in-bootstrap/18672475#18672475 — Carol Skelly, Mar 09 '22 at 14:17

score 120 · Answer 1 · answered Mar 13 '21 at 18:07

120

For those using Bootstrap 5 be aware that text-left and text-right classes have been removed. Now you can use text-start and text-end.

answered Mar 13 '21 at 18:07

Crasher

2,211
2
18
17

The problem I'm having right now is that text-start is giving me right-alignment and text-end is giving me left-alignment. – Literate Corvette May 24 '21 at 23:18
1

@LiterateCorvette please ask a new question about it and create a test case. – Crasher May 27 '21 at 10:22
Can you provide the link of the documentation? I tried to find and still appears text-left and right – AbbathCL Feb 11 '22 at 02:41
This worked like a charm on bootstrap 5! – Vikingslord Apr 02 '23 at 11:42

Carol Skelly · Accepted Answer · 2022-03-09T14:16:50.567

Bootstrap 5 - Update 2022

As explained here, left & right have been replaced with start & end in Bootstrap 5...

use float-end on a block elements (ie: div)
use text-end on inline elements (ie: a, span)

Bootstrap 4 - Update 2018

pull-right has changed to float-right

Bootstrap 3 - Original Answer

The original question was for Bootstrap 3 and the problem was that the OP was attempting to use text-right on a block element. text-right only works on inline elements. UL is a block element so you'd use pull-right like this..

<div class="col-xs-6">
     <ul class="nav nav-pills pull-right"> 
         ...

text-center and text-right not working in bootstrap

2 Answers2