Is there a set of classes in Twitters Bootstrap Framework that aligns text?
E.g. I have some tables with $
totals that I want aligned to the right...
<th class="align-right">Total</th>
and
<td class="align-right">$1,000,000.00</td>
转载于:https://stackoverflow.com/questions/12829608/bootstrap-text-align-class-for-inside-table
i guess because css already has text-align:right
AFAIK bootstrap doesn't have a special class for it.
Bootstrap does have "pull-right" for floating divs etc to the right.
UPDATE bootstrap 2.3 just came out and added text alignment styles
http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/
Bootstrap 2.3 has utility classes text-left, text-right and text-center, but they do not work in table cells. Until bootstrap 3.0 is released (where they have fixed the issue) and I am able to make the switch, I have added this to my site CSS that is loaded after bootstrap.css:
.text-right
{
text-align: right !important;
}
.text-center
{
text-align: center !important;
}
.text-left
{
text-align: left !important;
}
Just add a "custom" stylesheet which is loaded after Bootstrap´s stylesheet. So the class definitions are overloaded.
In this stylesheet declare the alignment as follows:
.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}
Now you are able to use the "common" alignment conventions for td and th elements.
Using Bootstrap 3.x using text-right
works perfectly:
<td class="text-right">
text aligned
</td>
Using Bootstrap 3.x using text-right
works perfectly:
<td class="text-right">
text aligned
</td>
These line of code is working properly. You can assign the classes like text-center,left or right, The text will align accordingly.
<p class="text-center"> Day 1 </p>
<p class="text-left"> Day 2 </p>
<p class="text-right"> Day 3 </p>
Here no need to create any external class, these are the bootstrap classes and have their own property.
Bootstrap Text Alignment in v3.3.5.
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>
Bootstrap 4 is coming! The utility classes made familiar in Bootstrap 3.x
are now break-point enabled. The default breakpoints are: xs
, sm
, md
, lg
and xl
, so these text alignment classes look something like .text-[breakpoint]-[alignnment]
.
<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>
Important: As of writing this, Bootstrap 4 is only in Alpha 2. These classes and how they're used are subject to change without notice.