Bootstrap: qué es, cómo instalarlo y ejemplos de uso (2024)

Tiempo de lectura: 5 minutos

Actualizado el jueves, 22 diciembre, 2022

Si te dedicas al diseño o a la maquetación web, seguramente tengas algún tipo de framework para agilizar y disminuir los tiempos de creación de tus de páginas web. Bootstrap es sin duda uno de los más populares.

Bootstrap incluye plantillas de diseño basadas en HTML y CSS para la realización de formularios, botones, tablas, navegación… así como complementos de JavaScript opcionales para mejorar el comportamiento de estos elementos. Esto te permite conseguir una web responsive en los navegadores modernos actuales invirtiendo el menor tiempo posible en maquetación.

La utilización de estos frameworks requiere de un periodo mínimo de aprendizaje para conocer su sintaxis y uso, pero en muy poco tiempo reducirás el proceso de diseño y maquetación enormemente. Aunque también hay otras opciones interesantes, como Materialize o Skeleton, hoy nos centraremos en qué es y cómo funciona Bootstrap.

Ventajas de Bootstrap

Aunque a priori pueda parecer una desventaja introducir scripts nuevos en tu web, te aseguro que utilizar Bootstrap te traerá más alegrías que problemas. A continuación te comento las principales ventajas de este framework CSS:

• Fácil de usar: si tienes conocimientos básicos de HTML y CSS puede comenzar a usar Bootstrap cuando quieras.
• Responsive: gracias a sus CSS tu diseño se adaptará a cualquier dispositivo.
• Mobile-first: es un framework que sigue la pauta mobile-first. Primero se diseña para móvil y después se adapta al resto de dispositivos.
• Multinavegador: Bootstrap 4 es compatible con todos los navegadores modernos (Chrome, Firefox, Internet Explorer 10+, Safari y Opera).

Instalación de Bootstrap

Para empezar a usar Bootstrap únicamente tienes que relacionar sus scripts y hojas de estilo en la cabecera del código HTML de tu web. Existen dos formas de hacerlo: desde una CDN (Content Delivery Network) o descargando los archivos de la página oficial y añadiéndolos al hosting de tu sitio.

Recuerda que en dinahosting tenemos 50 GB de almacenamiento en nuestro Plan de Hosting Básico, lo que será más que suficiente para alojar este framework y todo lo que necesites para tu web.

Insertar mediante CDN

Si por cualquier motivo no quieres descargar los archivos y subirlos a tu hosting, puede incluirlos desde una CDN. Únicamente tienes que añadir el siguiente código:

<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"><!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- Popper JS --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Recuerda que también debes incluir la dependencia a jQuery, ya que el javascript está escrito en ese lenguaje.

Una de las ventajas de emplear una CDN es que la propia red se preocupa de administrarte los archivos que se encuentren más cerca para reducir los posibles tiempos de carga. Si tienes tu web alojada en dinahosting despreocúpate, pues poseemos unas tasas de transferencia muy rápidas, por lo que esto no será un problema para ti.

Descargando los archivos Bootstrap

Si quieres descargar y alojar Bootstrap es tan sencillo como descargar los archivos del repositorio en su página web, y después añadir la ruta donde los tienes alojados en tu HTML. En la web del framework también te indican cómo instalarlos desde consola.

Desde mi punto de vista esta es la mejor opción, ya que no dependerás de terceros para proporcionar los archivos necesarios que necesita tu web para su correcta visualización.

Componentes principales

Bootstrap posee estilos para prácticamente todos los componentes que puede necesitar una web: menús, botones, tablas, tipografía… Detallar todos uno a uno sería interminable, por lo que en los siguientes apartados te haré un breve resumen de los que considero más prácticos y comunes. De todas formas si quieres echarle un vistazo a todo lo que proporcionan lo tienen completamente documentado en su web.

Grid

El trabajo en cuadrícula es la propiedad más importante que tiene Bootstrap, ya que nos resuelve el problema de visionado de elementos en diferentes resoluciones y dispositivos.

¿Qué esto de Grid? Uno de los principales problemas que te encuentras al diseñar una web es el reparto del espacio en las diferentes resoluciones de pantalla. Normalmente, según la resolución de pantalla quieres que el contenido se muestre de una manera u otra.

Grid permite definir comportamientos determinados a cada espacio y características de pantalla.

Para solucionar el problema del reparto, Bootstrap divide la pantalla en una cuadrícula de 12 columnas. Para que después tú mismo puedas gestionar esas columnas según el tamaño de la pantalla en cuestión. Por ejemplo, un párrafo que un monitor de escritorio quieres que ocupe la mitad de la pantalla (12/2 = 6 columnas), pero en dispositivo móvil te interesa que ocupe toda la pantalla (12 columnas). Esto se conseguiría añadiendo un estilo para pantallas pequeñas y otro para las demás:

<div class="row"><p class="col-sm-6 col-xs-12">Esto es un párrafo de texto que ocupa mitas de pantalla en dispositivos medio-grandes y toda la pantalla en pequeños.</p></div>

Tamaños de pantalla en Bootstrap

Lo que acabo de explicar suena muy bien…pero ¿cómo sabe Bootstrap si me encuentro en el móvil o en la pantalla de mi ordenador? El sistema de cuadrícula Bootstrap se divide en seis tamaños, con sus respectivos prefijos. Estos viene delimitados por el tamaño en píxeles de la pantalla:

• .col-xs– : dispositivos extra pequeños – ancho de pantalla inferior a 576 px
• .col-sm- :dispositivos pequeños – ancho de pantalla igual o superior a 576 px
• .col-md- : dispositivos medianos – ancho de pantalla igual o mayor que 768 px
• .col-lg- : dispositivos grandes – ancho de pantalla igual o mayor que 992 px
• .col-xl- : dispositivos grandes – ancho de pantalla igual o mayor que 1200 px
• .col-xxl- : dispositivos grandes – ancho de pantalla igual o mayor que 1400 px

Después de cada prefijo habría que añadir el número de columnas que abarcaría esa resolución. Por ejemplo: col-xs-12

Quizás te pueda parecer algo complejo, pero con un poco de práctica verás como te facilita mucho el trabajo. Para ver ejemplos concretos y documentación más extensa no te pierdas de vista su documentación de ayuda.

Un ejemplo de código podría ser:

<!-- Controla el ancho de las columnas, y cómo deben mostrarse en diferentes dispositivos --><div class="row"><div class="col-sm-6 col-xs-12"></div><div class="col-sm-6 col-xs-12"></div></div>

Navegación

Otro de los principales problemas que nos encontramos al diseñar una web es el menú. Un menú o barra de navegación es un encabezado que se coloca en la parte superior de la página. Además del problema del funcionamiento en dispositivos móviles (necesario que se compacte en un botón, para desplegar en móviles) existen muchas casuísticas interesantes que proporciona el propio Bootstrap en su código, como que se fije a la parte superior de la pantalla al hacer scroll.

Un ejemplo básico de como realizar un menú de navegación sería el siguiente:

<nav class="navbar navbar-expand-md bg-dark navbar-dark"><!-- Brand --><a class="navbar-brand" href="#">Navbar</a><!-- Toggler/collapsibe Button --><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button><!-- Navbar links --><div class="collapse navbar-collapse" id="collapsibleNavbar"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li></ul></div></nav>

Botones

Los botones son uno de los elementos más importantes de tu web. Anteriormente, ya te hemos hablado de su importancia y dado trucos para que los botones sean lo más usables posible.

Bootstrap ayuda enormemente a la implementación de estos consejos, ya que por defecto te proporciona clases para realizar diferentes botones según su cometidos y estado:

• Botones semánticos: botones con significado por sí mismo en su color. Rojo significa alerta, amarillo cuidado, etc.
• Botones contorneados: perfectos para acciones secundarias.
• Botones con estado: activado, desactivado, etc.
• Botones con tamaño: grandes, pequeños, de bloque, etc.

Todas estas clases además son aditivas, por lo que puedes ir añadiendo estados hasta conseguir el botón final que puedas necesitar. Por ejemplo, para un botón grande de alerta contorneado el estilo podría ser:

<button type="button" class="btn btn-danger btn-outline-danger btn-lg">Texto del botón</button>

Colores

Bootstrap no se fija solamente en el funcionamiento en responsive, sino que mejora toda la UX a tu página. Un ejemplo de ello es que también contiene clases para añadir colores que proporcionan “significado a través de los colores”. Estas clases se pueden añadir tanto a texto, como a botones, como a mensajes de alerta.

Por ejemplo, las clases para texto son:

• .text-muted
• .text-primary
• .textsuccess
• .text-info
• .text-warning
• .text-danger
• .text-secondary
• .text-white
• .text-dark
• .text-light

Para otros componentes o elementos únicamente tienes que cambiar el prefijo text por el del componente nuevo. Por ejemplo: .btn

Podría extenderme y explicar también las tablas, los sliders, los componentes de formularios… pero quién te lo va a explicar mejor que tu experiencia y las necesidades que tengas en cada momento. Recuerda que tienes mucha documentación en la página oficial, y algunos ejemplos con los que empezar tus diseños.

Y tú, ¿utilizas este u otro framework, o te gusta hacer todo desde cero? Cuéntanoslo en los comentarios.