Is there a set of classes in Twitter\'s Bootstrap framework that aligns text?
For example, I have some tables with $
totals that I want aligned to the r
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
Use text-align:center !important
. There may be othertext-align
css rules so the !important
is important.
table,
th,
td {
color: black !important;
border-collapse: collapse;
background-color: yellow !important;
border: 1px solid black;
padding: 10px;
text-align: center !important;
}
<table>
<tr>
<th>
Center aligned text
</th>
</tr>
<tr>
<td>Center aligned text</td>
<td>Center aligned text</td>
</tr>
</table>
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>
CodePen example
Ow, with the release of Bootstrap 3, you can use the classes of text-center
for center alignment, text-left
for left alignment, text-right
for right alignment and text-justify
for a justified alignment.
Bootstrap is a very simple frontend framework to work with, once you utilize it. As well as being very easy to customize to fit your liking.
In this three class Bootstrap invalid class
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }
Using Bootstrap 3.x using text-right
works perfectly:
<td class="text-right">
text aligned
</td>