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>
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
.
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">
...
In bootstrap 4 there's new class float-right
. So it'd be like above but:
<div class="col-xs-6">
<ul class="nav nav-pills float-right">
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.