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
– random_user_name, Commented Aug 3, 2016 at 14:27
I think it is working, refer to this fiddle jsfiddle.net/f0wL18zy hello is in center — Girdhari Agrawal
– Girdhari Agrawal, Commented Aug 3, 2016 at 14:33
For future readers using Bootstrap 5 see: stackoverflow.com/questions/18672452/… — Carol Skelly
– Carol Skelly, Commented Mar 9, 2022 at 14:17

Crasher · Accepted Answer · 2021-03-13 18:07:14Z

136

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, 2021 at 18:07

Crasher

2,5703 gold badges20 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Literate Corvette Over a year ago

The problem I'm having right now is that text-start is giving me right-alignment and text-end is giving me left-alignment.

Crasher Over a year ago

@LiterateCorvette please ask a new question about it and create a test case.

AbbathCL Over a year ago

Can you provide the link of the documentation? I tried to find and still appears text-left and right

user13561545 Over a year ago

This worked like a charm on bootstrap 5!

Carol Skelly · Accepted Answer · 2022-03-09 14:16:50Z

29

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"> 
         ...

edited Mar 9, 2022 at 14:16

answered Aug 3, 2016 at 14:33

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Collectives™ on Stack Overflow

text-center and text-right not working in bootstrap

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related