4.3. Utilidades

4.3.1. Icono para cerrar

Bootstrap 3 define la clase .close para mostrar la entidad HTML × como si fuera la típica X asociada con el cierre de una ventana o aplicación. Utilízalo para mostrar el icono de cerrar en las ventanas modales o en las alertas sin tener que utilizar una imagen.

Ejemplo:

<button type="button" class="close" aria-hidden="true">&times;</button>

Así se ve este ejemplo en tu navegador (es una X gris claro a la derecha del todo):

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.9 Icono de cierre en Bootstrap 3

4.3.2. Elementos flotantes

Flotar un elemento a la derecha o a la izquierda es muy habitual en la mayoría de diseños web. Por eso Bootstrap 3 define dos clases CSS genéricas llamadas .pull-left y .pull-right que puedes aplicar sobre cualquier elemento:

Ejemplo:

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Este es el código CSS aplicado a cada clase (la palabra reservada !important se utiliza para evitar posibles problemas con la especificidad de los selectores):

.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

Bootstrap 3 también define mixins para que puedas utilizar estos estilos en tus archivos LESS:

.elemento {
  .pull-left();
}
.otro-elemento {
  .pull-right();
}

No utilices estas clases para alinear los componentes de las barras de navegación .navbar. Utiliza en su lugar las dos clases equivalentes .navbar-left y .navbar-right.

4.3.3. Elementos centrados

Aplica la clase especial center-block para centrar horizontalmente cualquier elemento (el elemento centrado se convierte en un elemento de bloque):

Ejemplo:

<div class="center-block">...</div>

Este es el código CSS aplicado a esta clase:

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Bootstrap 3 también define un mixin para que puedas utilizar estos estilos en tus archivos LESS:

.elemento {
  .center-block();
}

4.3.4. Limpiando floats

Cuando un diseño utiliza muchos elementos flotantes, es común tener que limpiar un elemento para que no le afecten otros elementos flotantes. Bootstrap 3 utiliza para ello el famoso hack clearfix creado originalmente por Nicolas Gallagher.

Ejemplo:

<div class="clearfix">...</div>

Este es el código CSS aplicado a esta clase:

.clearfix:before,
.clearfix:after {
  display: table;
  content: " "
}
.clearfix:after {
  clear: both;
}

Bootstrap 3 también define un mixin para que puedas utilizar estos estilos en tus archivos LESS:

.elemento {
  .clearfix();
}

4.3.5.  Ocultando y mostrando elementos

Otras de las utilidades incluidas por Bootstrap 3 son las clases .show y .hide, que muestran y ocultan cualquier elemento.

Ejemplo:

<div class="show">...</div>
<div class="hide">...</div>

Este es el código CSS aplicado a estas clases (de nuevo se utiliza !important para evitar problemas con los selectores):

.show {
  display: block !important;
}
.hide {
  display: none !important;
}

Bootstrap 3 también define dos mixins para que puedas utilizar estos estilos en tus archivos LESS:

.elemento {
  .show();
}
.otro-elemento {
  .hide();
}

4.3.6.  Contenidos ocultos

Cuando se diseña un sitio web accesible, es común añadir ayudas en forma de texto que no se ve por pantalla, pero sí que se lee en los lectores que utilizan para navegar las personas discapacitadas.

Bootstrap 3 define la clase .sr-only para marcar un contenido como oculto y que sólo esté disponible para los lectores ("screen readers" en inglés, de ahí el nombre de la clase CSS). Ejemplo:

<a class="sr-only" href="#contenido">Ir al contenido</a>

Este es el código CSS aplicado a esta clase:

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Bootstrap 3 también define un mixin para que puedas utilizar estos estilos en tus archivos LESS:

.saltar-navegacion {
  .sr-only();
}

4.3.7. Reemplazando texto por imágenes

Una de las técnicas más habituales para mostrar el logotipo de los sitios web consiste en ocultar el texto de un elemento <h1> para que se vea la imagen de fondo que contiene el logotipo. Esta técnica es tan habitual que Bootstrap 3 define la clase .text-hide para que puedas aplicarla a cualquier elemento. Ejemplo:

<h1 class="text-hide">Nombre de la empresa</h1>

Este es el código CSS aplicado a esta clase:

.text-hide {
  background-color: transparent;
  border: 0;
  color: transparent;
  font: 0/0 a;
  text-shadow: none;
}

Bootstrap 3 también define un mixin para que puedas utilizar estos estilos en tus archivos LESS:

.logotipo {
  .text-hide();
}

4.3.8. Utilidades responsive

Las utilidades responsive permite diseñar más rápidamente sitios web móviles, ya que muestran u ocultan elementos en función del tipo de dispositivo que utiliza el usuario para navegar. También se incluyen clases para mostrar/ocultar elementos al imprimir la página.

Estas clases deben utilizarse con moderación y siempre para mejorar el aspecto de los contenidos en cada tipo de dispositivo. Además, sólo funcionan para los elementos de bloque y las tablas, por lo que no podrás aplicarlos a los elementos en línea.

Utiliza alguna de estas clases o combina varias entre sí para definir cómo se ven tus contenidos en cada tipo de dispositivo (teléfono = menos de 768px; tablet = más de 768px; ordenador = más de 992px; ordenador grande = más de 1200px):

Igualmente, puedes utilizar estas clases para definir qué contenidos se muestran al imprimir la página:

A continuación se muestra un ejemplo que utiliza todas estas clases. Prueba a redimensionar la ventana del navegador o accede a esta página con diferentes dispositivos para ver las diferencias:

Ver ejemplo en una página completa