Tengo html como:-
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 text-left">
<p>
© 2015 example.com. All rights reserved.
</p>
</div>
<div class="col-xs-12 col-sm-6 text-right">
<p>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
</footer>
Desde el código se puede ver que el texto de la columna están alineados a la izquierda y derecha, respectivamente. Sin embargo en el modo xs me gustaría que estuvieran alineados al centro. ¿Cómo puedo hacer esto usando twitter bootstrap?
Se ha añadido la alineación de texto adaptable en Bootstrap V4:
https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment
Para la alineación a la izquierda, a la derecha y al centro, existen clases responsivas que utilizan los mismos puntos de corte de anchura de la ventana gráfica que el sistema de cuadrícula.
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
No hay nada incorporado en bootstrap para esto, pero algunos css simple podría arreglarlo. Algo como esto debería funcionar. Aunque no se ha probado
@media (max-width: 768px) {
.col-xs-12.text-right, .col-xs-12.text-left {
text-align: center;
}
}
@media (max-width: 767px) {
footer .text-right,
footer .text-left {
text-align: center;
}
}
He actualizado la respuesta de @loddn'haciendo dos cambios
max-width
de las pantallas xs
en bootstrap es 767px (768px es el inicio de las pantallas sm
)footer
en lugar de col-*
de modo que si el ancho de las columnas cambia, el CSS no necesita ser actualizado.