¿Qué es Bootstrap?

Tag Bootstrap HTML

Nace en 2010 como un proyecto interno de Twitter de Mark Otto y Jacob Thornton, Bootstrap es una colección open source de herramientas gráficas, estilísticas y de diseño que se pueden utilizar para facilitar el desarrollo de aplicaciones web responsive y mobile-first. Muchos consideran Bootstrap como una biblioteca de componentes front-end, otros lo retienen un verdadero framework CSS. Sin embargo, en la página oficial se llama “toolkit”, es decir una “colección de herramientas”. Dejando a un lado el tecnicismo, Bootstrap es el framework CSS más popular en el mundo, utilizando el 80.6% de las páginas que hacen uso de un framework front-end, quiere decir casi el 20% del World Wide Web.

La biblioteca Bootstrap pone a disposición de los desarrolladores una considerable cantidad de snippets de código HTML, CSS y JavaScript para gestionar la interfaz gráfica de nuestras aplicaciones web. Con pocas líneas de código, sin tener que recurrir a folios de estilo personalizados, Bootstrap nos permite crear la estructura de nuestra página web, adaptar según las exigencias las propiedades gráficas de los elementos que la componen e implementar, gracias a los template pre-determinados, componentes interactivos como navbar, form, card y caroselli.

En este breve tutorial descubriremos juntos:

Por qué conviene usar Bootstrap
Cómo instalar Bootstrap
Cómo modificar nuestra página con Bootstrap
Cómo funciona el Bootstrap grid system

¿Por qué usar Bootstrap?

Primero de todo, es gratuito. Se trata de un proyecto open source, cualquiera puede utilizarlo para fines didácticos o comerciales.
Es rápido. Rápido de integrar (basta solo unas líneas de código),rápido de aprender. Dotado de una buena curva de aprendizaje, Bootstrap es ideal para frontendistas que quieren adentrarse al mundo web design y dar los primeros pasos en la proyección gráfica de las propias aplicaciones web. Son suficientes pocas horas de estudio para comenzar a empadronarse en sus funcionalidades, porque…
Cuenta con una documentación completa, clara y exhaustiva. En la página oficial cualquier componente se describe minuciosamente. No faltan los numerosos ejemplos de uso práctico, para convertir la comprensión todavía más fácil. Una documentación bien escrita, se sabe que es un tesoro para el desarrollador.
Además, es popular. Si la documentación no basta, hay muchos tutoriales disponibles en línea, foros o vídeos que te ayudarán a esclarecer algunas dudas.
Es un proyecto estable. Ha llegado a la versión 5.1.3, con más de 150.000 estrellas, cientos de colaboradores y miles de commit, Bootstrap es uno de los proyectos más activos en GitHub. Se optimiza constantemente y cualquier error se resuelve constantemente.
Es completamente personalizable. Utilizando Sass, un procesador que amplía el lenguaje CSS, es posible modificar y adaptar los folios de estilo predefinidos de Bootstrap a las propias exigencias.
Dulcis in fundo, es responsive y mobile-first. Bootstrap os ayudará a crear un layout web responsive, es decir que adapta automáticamente la largueza de los propios componentes según el viewport, es decir del área visible del usuario de una página web. Esto convierte Bootstrap en una herramienta perfecta para proyectar páginas mobile-first, pensadas sobre todo para los usuarios que navegan con el smartphone.

¿Cómo instalar Bootstrap?

Integrar la librería de Bootstrap en un nuevo proyecto es un juego para niños. En la documentación oficial se reflejan diferentes procesos de instalación. A continuación las tres más comunes:

Podéis copiar y pegar el starter template de Bootstrap en la página principal de vuestro proyecto. En este caso necesitaréis una CDN, por lo tanto los recursos de Bootstrap residirán en un servidor diferente al de su página HTML. En su defecto, si preferís no usar el starter template, podéis simplemente copiar y pegar en el interior del tag <head> el enlace a la hora de estilos principal de Bootstrap y, antes del tag de cierre </body>, un tag <script> en el cual se especifica la dirección de las bibliotecas en JavaScript de Bootstrap.
Es posible descargar e importar, con un simple drag and drop, el dundle CSS y los plug-in JavaScript de Bootstrap en vuestro proyecto. ¡No olvidéis conectarlos en la página HTML!
Podéis instalar también la biblioteca de Bootstrap en el interior de vuestro proyecto con la ayuda de un package manager. En el caso de npm, el package manager de Node.js, será suficiente lanzar en el terminal la línea de comandos npm install bootstrap, así npm añadirá la biblioteca de Bootstrap a las dependencias de vuestro proyecto. ¡No olvidéis especificar el camino a la hoja de estilo y al file.js (bootstrap.bundle.js) en el documento HTML!

¿Cómo funciona Bootstrap?

Una vez instalado Bootstrap, será suficiente aplicar una de sus clases predefinidas en un tag HTML para modificar el estilo. Por ejemplo, podemos añadir al atributo class de un tag <p> los siguientes valores:

text-success	El texto se colorea de verde. Se puede usar para indicar que una operación ha ido a buen fin.
text-danger	El texto se colorea de verde. Se puede usar para formatear un mensaje de error.
text-warning	El texto se colorea de amarillo.
text-dark	El texto se colorea de verde.
text-white	El texto se colorea de blanco.
text-opacity-25	Establece la opacidad del texto al 25%. Para aumentarla, basta sustituir el número 50 o 75
text-end	Alinea el texto al final de la línea.
text-center	Alinea el texto al centro de la línea.
text-uppercase	Transforma en mayúscula todas las letras.
text-lowercase	Transforma en minúscula todas las letras..
text-decoration-underline	Subraya el texto..
text-decoration-line-through	Tacha el texto.
fw-bold	Formatea el texto en negrita.
fst-italic	Formatea el texto en cursiva..

Es posible aplicar más clases al mismo tag HTML. Analicemos juntos estas líneas de código.

Al tag <div> se han agregado algunas clases para:

formatear el fondo (“bg-dark” para obtener el fondo negro, mientras que “bg-gradient” añade un degradado vertical semitransparente a partir del blanco);
establecer el ancho(“w-50” establece el ancho de <div> al 50% respecto al elemento parent);
redondea las esquinas de los bordes (“rounded”);
agrega una sombra (“shadow”).

Sin embargo, al tag <p>, han sido añadidas las clases para:

aumentar el margen izquierdo de 1,5 rem (“ms-4”);
aumentar el padding de 1 rem (“p-3”);
establecer el color del texto (“text-white”);
aumentar el grosor del texto (“fw-bold”).

Y aquí está el resultado final, simple pero efectivo:

Aplicando las clases de Bootstrap es posible formatear el color, el fondo, la sombra, la posición o los bordes de los elementos HTML. O crear tablas, navbar responsive, pulsantes, form de gestión de datos, ventanas modales y mucho más. En la documentación oficial de Bootstrap los componentes se dividen en categorías y se pueden buscar a través de una práctica barra de búsqueda.

El Bootstrap grid system

Como hemos anticipado, Bootstrap es una herramienta particularmente útil para crear layout de base del propio objeto web. Esto también se debe gracias al célebre grid system (o sistema de rejilla), una de las features de Bootstrap más usadas y apreciadas que permite ordenar el contenido de una página web de forma totalmente responsive. El ideal para construir la columna vertebral de nuestro proyecto. ¿Cómo funciona el grid system de Bootstrap?

Es necesario introducir cuatro conceptos claves: contenedor, línea, columna y breakpoint.

El contenedor representa la parte más externa del grid system. Es posible crear uno añadiendo a un tag <div> la clase “container”. Cualquier container a su vez puede incluir una o más líneas (<div> con clase “row”), que sirven para “envolver” la parte más interna (y flexible) del grid system: las columnas (<div> con clase “col”). En este ejemplo vemos un grid system formado por un container y dos líneas con tres columnas cada una:

El grid system de Bootstrap divide el contenido de todas las líneas en 12 partes. Podemos entonces especificar el ancho de cada columna en doceavos, asociando a la clase “col” un sufijo numérico del 1 al 12, por ejemplo:

“Columna 1” y “Columna 2” ocupan 3 unidades cada una, mientras que la “Columna 3” ocupa 6. Total: 12. Obviamente “Columna 3” será igual de larga que las dos primeras, ocupará el 50% del container independientemente del ancho del viewport.

¿Qué sucede si la suma de las unidades emparejadas a las columnas es mayor de 12? Simple: la columna que “excede” irá automáticamente a la cabecera.

Podemos ser todavía más específicos en los ajustes de nuestro layout sirviéndonos de los breakpoint de Bootstrap. Los breakpoint no son otra cosa que los media query pre definitivos de la biblioteca Bootstrap. Los breakpoint de Bootstrap son 6 y se añaden entre el prefijo “col” y el sufijo numérico:

Especificando una breakpoint indicamos cual tiene que ser el comportamiento exacto de una columna, en términos de ancho, en base a las dimensiones del viewport. La clase “col-md-6”, por ejemplo, indica que una columna ocupará 6 unidades a partir de 768 px. En dispositivos con pantallas de menos de 768 px, las columnas se apilarán automáticamente una debajo de la otra.

Bootstrap permite combinar más breakpoint para una columna. Echemos un vistazo al siguiente código:

En este ejemplo la “Columna 1” ocupa 4 unidades en dispositivos con un ancho de pantalla superior a 1200 px, mientras que “Columna 2” ocupa 8. En las pantallas un poco más estrechas, más precisamente de 768 px a 1200 px, las dos columnas ocuparán el espacio contrario: las primeras 8 unidades, la segunda 4. Dado que no hemos establecido ningún punto de corte que contemple dispositivos incluso más pequeños, o sea con un ancho inferior de 768 px, en los dispositivos móviles las dos columnas se ordenarán automáticamente una encima de la otra.

Conclusión

Si estáis en búsqueda de una herramienta simple para utilizar, rápida y gratis que os ofrezca un punto de partida sólido y al mismo tiempo versátil para convertir el layout de vuestra aplicación web responsive, entonces Bootstrap es para vosotros.

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo