Use .text-left
para textos alinhados à esquerda.
Use .text-center
para textos alinhados ao centro.
Use .text-right
para textos alinhados à direita.
E por último, para textos justificados, você pode utilizar a classe .text-justify
.
Algumas coisas em CSS são comuns no dia-a-dia do desenvolvimento, e achamos chato toda hora ter que voltar a escrevê-las. É por isso que montamos os auxiliares. :P
GA IN TI ME
Use as classes left
e right
para da um quick float em um elemento. !important
é aplicado.
Quando usamos elementos flutuantes, o normal é que o elemento pai "se esqueça" dos filhos, e deixe de crescer em altura. Pois bem, para solucionar esse problema, trouxemos a classe .fix-height
.
<div class="content-align fix-height success">
<button class="btn left">Left</button>
<button class="btn right>Right</button>
</div>
Com a classe .center
, definimos que um elemento é um bloco (display: block
), e colocamos ele no centro através de margin
.
<div class="center danger" style="width: 50px">.....</div>
Vai ver, tudo o que aquele elemento precisa é de um .padding
padrão. :P
Se você quiser apenas padding horizontal, utilize .padding-lr
.
Se você quiser apenas padding vertical, utilize .padding-tb
.
<div class="success padding" style="width: 50px">.....</div>
A classe .content-align
alinha todo o conteúdo diretamente ligado a ela (>
) horizontalmente e verticamente. Provoca display: inline-block
.
Use .text-left
para textos alinhados à esquerda.
Use .text-center
para textos alinhados ao centro.
Use .text-right
para textos alinhados à direita.
E por último, para textos justificados, você pode utilizar a classe .text-justify
.
Alguns textos precisam ser cortados antes mesmo de terminarem, e é pra isso que serve a nossa classe .truncate
. Observe:
<div class="inform" style="max-width: 300px">
<p class="truncate">
Este é um texto muito longo e, por isso, deve ser truncado.
</p>
</div>
Este é um texto muito longo e, por isso, deve ser truncado.