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>