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 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.
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.
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.
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.
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
.
Bootstrap 5 - Update 2022
As explained here, left & right have been replaced with start & end in Bootstrap 5...
float-end
on a block elements (ie: div
)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">
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With