Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

text-center and text-right not working in bootstrap

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>
like image 543
user2953989 Avatar asked Aug 03 '16 14:08

user2953989


People also ask

How do I align text to the right in bootstrap?

You can simply use the class . justify-content-between in combination with the class . d-flex to left align and right align text content within a <div> container in Bootstrap 4.

How do I center align text in bootstrap?

Add class . text-center to the parent div to align text or any item inside to the center. You can also decide how the alignment should look like on the specific screen sizes.

How do I center align text in Bootstrap 3?

By adding the ” text-center” class of Bootstrap 3 We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.

What is text-right in bootstrap?

In Bootstrap version 5, text alignment utility classes are changed. Use following new classes to align text: text-left text-start for left alignment. text-center for center alignment. text-right text-end for right alignment.


2 Answers

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.

like image 188
Crasher Avatar answered Sep 21 '22 09:09

Crasher


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"> 
         ...
like image 36
Zim Avatar answered Sep 22 '22 09:09

Zim