¿Cómo centrar texto en pantallas pequeñas con Bootstrap?

Mateo G. - July 19, 2024

Problema: Centrar texto en pantallas pequeñas

Centrar texto en pantallas pequeñas puede ser complicado al usar Bootstrap. El diseño predeterminado podría no alinear el texto como deseas, especialmente en dispositivos móviles. Esto puede hacer que tu interfaz de usuario sea menos atractiva y potencialmente confundir a los usuarios.

Solución: Implementar alineación de texto adaptable en Bootstrap

Uso de las clases de alineación de texto de Bootstrap

Bootstrap tiene utilidades de alineación de texto que permiten controlar la alineación del texto en diferentes tamaños de pantalla. Estas clases utilizan los mismos puntos de interrupción de ancho de viewport que el sistema de cuadrícula.

Para usar estas clases, aplíquelas al elemento con su texto. El formato es text-{breakpoint}-{alignment}, donde {breakpoint} es el tamaño de pantalla (xs, sm, md, lg, xl) y {alignment} es left, center o right.

Ejemplo: Abreviatura de alineación de texto adaptable

Recuerde que no necesita especificar la alineación para cada punto de interrupción. Bootstrap aplica la alineación al punto de interrupción especificado y todas las pantallas más grandes hasta que otra clase la anule. Por ejemplo, text-md-center centra el texto en pantallas medianas y más grandes, a menos que también se aplique una clase para pantallas más grandes (como text-lg-left).

Pasos para centrar el texto del pie de página

Para centrar el texto del pie de página en pantallas pequeñas mientras se mantiene la alineación izquierda y derecha en pantallas más grandes, siga estos pasos:

Cambiar la estructura HTML: Mantenga la estructura actual, pero agregue nuevas clases a los elementos <div> con el texto.
Agregar clases de alineación a las columnas: Para la columna izquierda, use text-xs-center text-sm-left. Para la columna derecha, use text-xs-center text-sm-right.
Alinear en todos los tamaños de dispositivos: El HTML modificado debería verse así:

   <footer>
   <div class="container">
       <div class="row">
           <div class="col-xs-12 col-sm-6 text-xs-center text-sm-left">
               <p>
                   &copy; 2015 example.com. Todos los derechos reservados.
               </p>
           </div>
           <div class="col-xs-12 col-sm-6 text-xs-center text-sm-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>

Este cambio centra el texto en pantallas extra pequeñas (xs) y mantiene la alineación original izquierda y derecha en pantallas pequeñas (sm) y superiores.

Enfoques alternativos para centrar texto

Consultas de medios CSS personalizadas

Puedes usar consultas de medios CSS personalizadas para controlar la alineación del texto en diferentes tamaños de pantalla. Este enfoque implica escribir reglas CSS que se dirigen a puntos de quiebre específicos.

Aquí tienes un ejemplo de cómo implementar consultas de medios CSS personalizadas:

@media (max-width: 575px) {
    .footer-text {
        text-align: center;
    }
}

@media (min-width: 576px) {
    .footer-left {
        text-align: let;
    }
    .footer-right {
        text-align: right;
    }
}

Ventajas de usar CSS personalizado:

Mayor control sobre puntos de quiebre específicos
Puede dirigirse a elementos con más precisión

Desventajas de usar CSS personalizado:

Requiere más mantenimiento
Puede entrar en conflicto con las clases incorporadas de Bootstrap
Aumenta el tamaño del archivo CSS

Ejemplo: Personalización de puntos de quiebre

Puedes ajustar tus consultas de medios usando puntos de quiebre personalizados que se ajusten a tus necesidades de diseño. Por ejemplo:

@media (min-width: 768px) and (max-width: 991px) {
    .footer-text {
        font-size: 14px;
    }
}

Esto te permite aplicar estilos específicos para pantallas de tamaño mediano.

Solución basada en Flexbox

Flexbox ofrece una forma de centrar texto y otro contenido. Puedes usar Flexbox con el sistema de cuadrícula de Bootstrap para una solución de alineación flexible.

Para implementar un enfoque de centrado basado en Flexbox:

Añade una clase de contenedor Flexbox a tu fila:

<div class="row d-flex">

Usa clases de utilidad Flexbox en tus columnas:

<div class="col-xs-12 col-sm-6 d-flex justify-content-center justify-content-sm-start">
    <!-- Contenido de la columna izquierda -->
</div>
<div class="col-xs-12 col-sm-6 d-flex justify-content-center justify-content-sm-end">
    <!-- Contenido de la columna derecha -->
</div>

Esta solución centra el contenido en pantallas extra pequeñas y lo alinea a la izquierda o derecha en pantallas pequeñas y superiores.

Al usar Flexbox con el sistema de cuadrícula de Bootstrap, ten en cuenta que:

Las propiedades de Flexbox pueden afectar el diseño de las columnas de la cuadrícula
Algunos navegadores más antiguos pueden no admitir completamente Flexbox
Los diseños complejos de Flexbox pueden ser más difíciles de mantener

Tanto las soluciones de CSS personalizado como las de Flexbox ofrecen alternativas a las clases de alineación de texto incorporadas de Bootstrap, permitiendo un control más específico sobre tu diseño.