user3005003 user3005003 - 4 months ago 14
CSS Question

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>

Answer

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