fbpx

Qué es Bootstrap y cómo usarlo

Hoy te traigo una actualización de un viejo artículo de Álvaro Fontela sobre Bootstrap. Es hora de ponerlo al día y aprovechar para incluir las dudas que los lectores del blog de Raiola nos han hecho llegar. ¡Vamos a ello!

Como sabrás, el mundo de internet ha ido cambiando progresivamente. Las necesidades de los usuarios aumentan y cada vez son más los dispositivos que conectamos a la red. En consecuencia, los sitios web de todo el mundo han tenido que adaptarse y evolucionar.

En 2011, Mark Otto y Jacob Thornton de Twitter desarrollaron un conjunto de herramientas a modo de solución interna para su propia empresa: Blueprint. Con el tiempo, Blueprint se liberó como un proyecto de Open Source en GitHub y evolucionó a lo que hoy conocemos como Bootstrap.

Bootstrap te permite darle forma a tu web y adaptarla a las necesidades actuales de tus usuarios. Es una herramienta que todo desarrollador web debería conocer y, por eso, en este artículo te voy a explicar qué es Bootstrap, qué han aportado sus últimas versiones y cuáles son sus ventajas.

¿Qué es Bootstrap?

Bootstrap es un kit de herramientas de código abierto para desarrollos web responsive con HTML, CSS y JavaScript. Con él puedes darle forma a tu sitio web a través del uso de sus librerías CSS y JavaScript. Incluye diferentes componentes: ventanas modales, menús, cuadros, botones, formularios… Es decir, los elementos que necesitas para maquetar tu página.

elementos de bootstrap

Bootstrap es una excelente herramienta que te permite crear interfaces de usuario limpias y totalmente adaptables a todo tipo de dispositivos y pantallas, sea cual sea su tamaño. Desde Bootstrap 3, el framework se ha vuelto más compatible con el desarrollo web responsive. De esto ya te habló Álvaro en 2015, pero vamos a recordarlo. Bootstrap 3 fue una gran actualización y, si no me crees, fíjate en las novedades de esa versión:

  • Soporte bastante bueno (casi completo) con HTML5 y CSS3, que permite un uso muy flexible para desarrollo web con unos excelentes resultados.
  • Un sistema GRID que permite diseñar usando un grid de 12 columnas donde se debe plasmar el contenido. Así podemos desarrollar responsive de forma mucho más fácil e intuitiva.
  • Bootstrap 3 establece Media Queries para 4 tamaños de dispositivos diferentes, variando en función del tamaño de la pantalla. Estas Media Queries permiten desarrollar para dispositivos móviles y tablets de forma mucho más fácil.
  • Bootstrap 3 también permite insertar imágenes responsive, es decir, con solo insertar la imagen con la clase “img-responsive” estas se adaptarán al tamaño.

Desde luego, son grandes ventajas. Y desde entonces hasta hoy, ha seguido evolucionando. Desde hace poco más de un año, concretamente el 18 de enero de 2018, puedes disfrutar de su nueva versión: Bootstrap 4. ¿La conoces? Vamos a verla.

Bootstrap 4: Todas sus novedades

Como dijo uno de sus creadores, esta es una de las mayores actualizaciones del framework. Entre las novedades de Bootstrap 4 encontrarás tanto nuevas funcionalidades como componentes que han sido eliminados.

A continuación, te voy a contar los cambios más importantes de esta versión. De todas formas, puedes verlos todos en el GitHub de Bootstrap:

  • Se eliminan los iconos Glyphicons: En Bootstrap 3 los desarrolladores “separaron” la librería de Glyphicons dentro del proyecto, aunque se podían seguir utilizando. Ahora, con Bootstrap 4 los iconos desaparecen totalmente. Si vas a la página oficial del framework, verás que la documentación sobre Glyphicons ya no existe. Lo que recomiendan (y que personalmente también te recomiendo yo) es utilizar librerías de iconos que implementen SVG, como Iconic y Octicons. Como alternativa, también podrás utilizar la famosa librería de iconos Font Awesome.
  • Cambio de preprocesador CSS: Bootstrap 4 deja de usar Less para utilizar Sass.
  • Se han corregido vulnerabilidades XSS: Por eso siempre es importante mantener tus librerías actualizadas, tanto con Bootstrap como para otras.
  • Nuevos componentes: A partir de la versión 4.2.0 de Bootstrap se han añadido más componentes. ¡Sí, más todavía! Se han hecho mejoras en elementos que ya incorporaba la librería.
  • Flexbox por defecto: Es una de las grandes ventajas. Flexbox es una característica muy potente de CSS que te permite crear diseños responsive de una manera mucho más simple.
  • REM: Bootstrap usa ahora esta medida de unidades relativas en lugar de px. Esto favorece la escalabilidad de las tipografías al adaptar el diseño a distintos dispositivos.

Conclusión: ¿Es fácil de aprender? Si. Pero está claro que tienes que tener unos conocimientos mínimos sobre web. Al menos, debes saber trabajar con HTML y un poquito de CSS.

¿Bootstrap 4 es compatible con todos los navegadores?

Bootstrap es compatible con la mayoría de navegadores del mercado. Te hago un pequeño resumen:

  • Google Chrome (en todas las plataformas)
  • Mozilla Firefox (en todas las plataformas)
  • Internet Explorer (Windows)
  • Microsoft Edge (Windows, Android, iOS, Windows 10 mobile)
  • Safari (Mac, iOS)
  • Opera (Mac, Windows)

compatibilidad de Bootstrap

Ejemplos de Bootstrap

Con Bootstrap no hay límites al maquetar cualquier diseño que te propongas. Todo depende de tu imaginación e ingenio. Si consigues dominar el uso de este framework, podrás hacer cosas como estas:

webs con bootstrap

¿Qué te parecen estos ejemplos de Bootstrap? Como puedes ver, puedes hacer cosas increíbles de manera bastante sencilla. ¿Quieres lograr hacer cosas como estas? ¡Sigue leyendo!

Cómo descargar e instalar Bootstrap

Cuando vayas a crear tu web con Bootstrap, el primer paso será instalar el framework. Si todavía no tienes un sitio donde alojar tu web, te recomiendo que eches un vistazo a nuestros planes de hosting compartido con 1 mes de prueba gratis.

Como te explicaba más arriba, Bootstrap es un conjunto de herramientas para maquetar sitios web responsive de forma sencilla. Está formado por una serie de archivos CSS y JavaScript que te proporcionarán una estructura base para que crees tu sitio. Es por ello que tienes descargar e incluir estos archivos de Bootstrap dentro de tu proyecto.

Hay varias maneras de empezar a utilizar Bootstrap. Te voy a explicar cada una de ellas:

Cómo descargar CSS y JSS compilado y minificado

Si quieres, puedes descargarte los archivos que conforman el framework y alojarlos en tu propio proyecto.

Lo primero que tienes que hacer es acceder a la web oficial de Bootstrap. Una vez dentro, haz clic en el botón “Download”. En la siguiente pantalla, pulsa el botón “Download” que está debajo de “Compiled CSS and JS”.

como descargar bootstrap

Te descargarás un zip con todos los archivos de Bootstrap. Descomprime el zip y verás que dentro hay dos carpetas: una llamada “js” para los archivos JavaScript y otra llamada “CSS” para los archivos CSS.

css bootstrap

En este post te hablo de la versión 4.5.2 de Bootstrap. Es posible que, con nuevas versiones del framework, cambien algunas cosas.

Como puedes ver, de cada archivo también tienes su versión “.min” que, básicamente, es su versión minificada y, por lo tanto, menos pesada. En mi opinión, en casos normales son estos archivos los que deberías añadir a tu proyecto. El hecho de ser menos pesados optimizará los tiempos de carga de tu web.

También verás que hay una versión “.map” de cada archivo. Los archivos .map se utilizan para conectar el archivo original con su archivo minificado cuando estamos utilizando un preprocesador de código como, por ejemplo, LESS o SASS.

Dentro de la carpeta js verás que hay dos variantes: bootstrap.js y bootstrap.bundle.js. La diferencia es que bootstrap.bundle.js ya incluye el script popper.js, mientras que bootstrap.js no lo hace y tendrás que incluirlo manualmente.

Por si no lo sabes, popper.js es un script que utiliza Bootstrap para algunos elementos, como las ventanas emergentes, tooltips, etc.

Los archivos bootstrap.js y bootstrap.bundle.js no incluyen jQuery, por lo que deberás incluirlo.

Dentro de la carpeta CSS encontrarás el archivo bootstrap.css, que contiene toda la estructura y componentes del framework. Además, también tendrás a tu disposición los archivos bootstrap.reboot.css y bootstrap.grid.css.

  • El archivo reboot solamente contiene el CSS que “resetea” los estilos predefinidos de los navegadores. Este reseteo se hace para asegurar una compatibilidad óptima con todos ellos.
  • El archivo grid te proporciona sólo el sistema de rejilla en el que se basa Bootstrap (las famosas filas y columnas).

Bootstrap te da estos dos archivos por separado por si solamente quieres usar las funcionalidades que te proporciona uno de ellos. De esta manera, no estarías cargando en tu proyecto todos los componentes de Bootstrap que no te interesan.

Ahora que ya sabes qué es el contenido que te has descargado, tienes que saber cómo incluirlo en tu proyecto.

En primer lugar, tienes que incluir el archivo bootstrap.min.css dentro de las etiquetas <head></head> con este código:

Después tienes que incluir, en este orden, los archivos javascript de jQuery, Popper y Bootstrap. Tienes que ponerlos justo antes de la etiqueta </body>, con este código:

Para que veas un ejemplo con el código completo, sería así:

Como ves, Bootstrap requiere el uso del ‘doctype’ de HTML 5:

Y, además, como es “mobile first”, es necesario incluir la siguiente etiqueta meta dentro del head para asegurarnos de la máxima compatibilidad con dispositivos móviles:

Es importante que añadas los archivos javascript en ese orden. Primero jQuery, después popper.js y finalmente Bootstrap. Puedes descargarte jQuery y popper.js desde sus webs oficiales.

Utilizar los links del CDN que te proporciona Bootstrap

Otra manera de instalar y utilizar Bootstrap en tu sitio web es usar los links del CDN que te facilitan en su web oficial. De esta manera estarías cargando los archivos del framework sin tenerlos alojados en tu servidor.

Con el siguiente código tendrás listo para usar en tu página Bootstrap mediante CDN:

Como puedes ver, el código es prácticamente el mismo que cuando incluimos los archivos de Bootstrap manualmente. La diferencia es que ahora estamos llamando a esos archivos de manera externa.

Si usas CDN para cargar Bootstrap estarás haciendo peticiones externas a tu servidor. Es importante que tengas esto en cuenta, ya que si haces muchas peticiones externas a tu servidor (Bootstrap, Font Awesome, Google Fonts…) puede verse afectada la velocidad de carga de la web.

Usar gestores de paquetes

Por último, voy a enseñarte a instalar Bootstrap a través de un gestor de paquetes. Si eres un usuario principiante, te recomiendo hacerlo como te indican los dos apartados anteriores. Esto se debe a que, para poder llevar a cabo esta tarea, debes al menos saber trabajar con la terminal o consola de comandos de tu sistema operativo.

Dicho esto, como te decía, otra manera de instalar Bootstrap en tu proyecto es añadirlo como dependencia con un gestor de paquetes. A continuación te voy a enseñar, a modo de guía rápida, cuál es la sintaxis que deberás usar en cada caso:

–  npm

Puedes integrar Bootstrap en Node.js con el siguiente comando:

–  yarn

También puedes integrarlo en Node.js con Yarn:

–  RubyGems

Si usas Bundler:

Si no usas Bundler:

–  Composer

Si trabajas con PHP, usa el siguiente comando:

–  NuGet

Si trabajas con .NET, puedes instalar el framework con alguno de los siguientes comandos:

Para Bootstrap CSS

Para Bootstrap SASS

 

Instalar Bootstrap en Joomla

Desde Joomla 3.0.0, Bootstrap ya viene incorporado en el CMS (eso sí, en su versión 3). Está previsto que la versión 4 de Joomla utilice Bootstrap 4. Es por esto que no lo voy a explicar en profundidad en este artículo.

De todas formas, si estás interesado en saber más sobre este tema, deja un comentario en este post y ampliaré la información sobre Bootstrap en Joomla.

Instalar Bootstrap en WordPress (cómo utilizarlo en mi tema)

Si utilizas WordPress, también puedes beneficiarte de las ventajas que te proporciona Bootstrap. Hay temas que ya lo tienen implementado, pero si en tu caso no es así sigue leyendo para saber cómo incluirlo.

Lo primero que debes hacer, si no lo tienes, es crear un tema hijo. Después, existen dos opciones: descargar los archivos de Bootstrap para incluirlos en tu tema o incluirlo a través de los links del CDN.

En caso de que elijas descargarlos, mi consejo es que crees dos carpetas dentro de tu tema hijo: una llamada “css” y otra llamada “js”. Dentro de las ellas, subirás los archivos correspondientes. Puedes subir los archivos por FTP o a través del administrador de archivos del panel de hosting.

El siguiente paso es editar el archivo functions.php de tu tema hijo para incluir las siguientes líneas de código:

Recuerda que, en el momento de creación de este post, la versión más reciente de Bootstrap era la 4.5.2. Tendrás que modificar el código anterior para adaptarlo a la versión más reciente según corresponda.

Plugins Bootstrap para WordPress

Como ya te comenté más arriba, existen themes que vienen con las librerías de Bootstrap ya incluidas, como Understrap. Es básicamente un ‘starter theme’, un tema pensado para trabajar desde cero en tu proyecto utilizando Bootstrap. Existen otros temas, como WP Bootstrap Starter, que también cumplen este propósito.

Si ya estás usando una plantilla en tu WordPress y necesitas implementar Bootstrap en tu proyecto, puedes recurrir a algún plugin como Bootstrap Shortcodes Ultimate. Está pensado para utilizar Bootstrap mediante shortcodes y, por lo tanto, incluye sus librerías. Sin embargo, a día de hoy no trabaja con la última versión de Bootstrap.

shortcodes bootstrap

Si utilizas Gutenberg, el nuevo editor de bloques de WordPress, puedes instalar el plugin Bootstrap Blocks. Este plugin te permite utilizar componentes de Bootstrap a través de nuevos bloques de Gutenberg. Lo malo es que solamente dispone de bloques para contenedores, filas, columnas y botones. De hecho, en su propia documentación te avisan de que no incluyen toda la librería de Bootstrap y, en caso de querer usarla, deberás incluirla tú manualmente.

bloques de boostrap

Componentes de Bootstrap

En Bootstrap tienes a tu disposición un gran número de componentes o elementos listos para usar. En este post te voy a hablar de los que yo considero más importantes para que aprendas a usar esta librería. Si quieres verlos todos al detalle, consulta la documentación de Bootstrap. ¡Vamos al lío!

Grid o sistema de rejilla

Una de las cosas más interesantes que aporta Bootstrap es su sistema de rejilla (grid system). Con él maquetarás el layout o estructura de las páginas de tu sitio web. Este sistema es totalmente responsive y se basa en contenedores, filas y columnas. Desde la versión 4, el grid de Bootstrap se basa en el modelo flexbox de CSS.

Las clases CSS que se utilizan son:

  • container para el contenedor
  • row para las filas
  • col para las columnas

¿Pero dónde las tienes que utilizar? Dentro del atributo “class” en las etiquetas <div> de HTML.

Dentro de un contenedor (container) crearás filas (row) y dentro de cada fila crearás columnas (col).

El contenedor sirve para envolver y centrar horizontalmente el contenido. Puedes usar varios tipos de contenedores dependiendo de cuánto ancho quieras que ocupen:

  • Con la clase container consigues un ancho máximo de 1140px.
  • Con la clase container-fluid consigues un ancho del 100% de la ventana.
  • Con las clases container-sm, container-md, container-lg y container-xl consigues un ancho del 100% de la ventana hasta que se alcance el breakpoint o punto de corte especificado.

Las filas se crean con la clase row y sirven para agrupar las columnas que vayas creando dentro de ellas. Solamente las columnas pueden ser “hijos” inmediatos de las filas.

Las columnas se crean con la clase col, pero admiten ciertas modificaciones.

Las columnas que crees usando la clase col se adaptarán proporcionalmente al ancho de la fila. Es decir, si creas 2 columnas cada una ocupará el 50% del ancho de la fila, si creas 4 columnas cada una ocupará el 25%, etc.

Por ejemplo:

En el ejemplo anterior hay creadas 3 columnas, por lo que cada una ocupará un 33.333% del ancho.

Pero, ¿qué pasa si no quieres que todas las columnas tengan el mismo ancho? En ese caso, tienes que especificar el número de columnas que quieres que ocupe, de un máximo de 12.

Por ejemplo:

En este ejemplo, la columna con la clase col-6 ocupará 6 de las 12 posibles columnas, es decir ½. Las columnas con la clase col-3 ocuparán 3 de las 12 posibles columnas, es decir 1/4 cada una. Cómo puedes ver, la suma de los valores de las columnas es 12 (3+6+3).

grid o sistema rejilla de bootstrap

Tal y como te decía más arriba, Bootstrap es un sistema responsive que se adapta a los distintos tamaños de ventana y dispositivos. La siguiente opción para modificar las columnas tiene que ver con esto. Puedes especificar el ancho de cada columna en función del ancho de la ventana del navegador usando las clases col-sm-*, col-md-*, col-lg-* y col-xl-*. De esta manera, puedes hacer que una estructura de 4 columnas en versión escritorio se muestre en una sola columna en versión móvil.

Para entender esto tienes que saber que en Bootstrap existen unos puntos de corte en función del ancho de la ventana de tu navegador:

sm Ancho mayor o igual a 576 px
md ancho mayor o igual a 768 px
lg ancho mayor o igual a 992px
xl ancho mayor o igual a 1200px

Como Bootstrap es “mobile-first”, el orden de prioridad es de menor a mayor. Es decir, lo que apliques a un punto de corte se aplicará también a los tamaños superiores, a no ser que especifiques lo contrario. Por ejemplo, si quieres el mismo ancho de columna para ‘lg’ y para ‘xl’, solo tienes que especificar el ‘lg’.

Si no especificas ningún punto de corte en la clase CSS, se entiende que se aplica desde el menor tamaño.

Utilidades para maquetación

Bootstrap te proporciona una serie de clases predefinidas para agilizar ciertas tareas comunes al maquetar una web. A continuación, te detallo los más importantes.

Si quieres ver todas las utilidades de Bootstrap al detalle, puedes hacerlo en: https://getbootstrap.com/docs/4.5/utilities/

Colores en Bootstrap

Utilizando una serie de clases, puedes aplicar colores que Bootstrap tiene prefijados. Por ejemplo, puedes aplicar colores a textos añadiendo las siguientes clases:

  • text-primary
  • text-secondary
  • text-success
  • text-danger
  • text-warning
  • text-info
  • text-light
  • text-dark
  • text-body (texto del color por defecto del “body”)
  • text-muted
  • text-white
  • text-black-50 (texto negro con opacidad al 50%)
  • text-white-50 (texto blanco con opacidad al 50%)

También puedes aplicar colores de fondo con las siguientes clases: bg-primary, bg-success, bg-info, bg-warning, bg-danger, bg-secondary, bg-dark y.bg-light.

Te pongo un ejemplo utilizando textos y colores de fondo:

colores en bootstrap

Ya habrás visto que algunas de estas clases comparten ciertos sufijos (*-primary, *-warning, *-success, etc). En algunos componentes puedes utilizar estos sufijos para aplicar color a dicho componente.

Tamaños

Algunos componentes admiten un sufijo en su clase para modificar su tamaño. Por ejemplo, podemos variar el tamaño de un botón con las clases btn-lg, btn-md y btn-sm.

También puedes modificar el ancho de un elemento con las clases w-25, w-50, w-75, w-100 y w-auto. Con ellas establecerás un ancho del 25%, 50%, 75%, 100% o auto, respectivamente. Para modificar el alto, simplemente cambia la w por una h.

Puedes establecer un ancho o alto máximos del 100% con las clases mw-100 y mh-100.

tamaños en bootstrap

Espaciado

Una de las cosas que más me gustan de Bootstrap es lo fácil que es aplicar espaciados (margin y padding) a cualquier elemento. Para explicarte cómo funcionan las clases que puedes usar para ello, voy a partir del siguiente formato:

En “propiedad” puedes utilizar:

m margin
p padding

En “lados” puedes utilizar:

t lado superior (top)
b lado inferior (bottom)
l lado izquierdo (left)
r lado derecho (right)
x lados izquierdo y derecho (eje x)
y arriba y abajo (eje y)
‘en blanco’ aplicarlo a los 4 lados

En “tamaño”:

0 para eliminar el margen o padding
del 1 al 5 establecer margin o padding de distintos tamaños (de menor a mayor)
auto aplicar un margin automático (margin:auto;)

Los valores del 1 al 5 de los tamaños se corresponden a 0.25rem, 0.5rem, 1rem, 1.5rem y 3rem, respectivamente.

Para que entiendas mejor esta manera de componer clases para espaciar elementos, te pongo algunos ejemplos:

El siguiente <div> tendrá un margen superior de 0.25rem.

El siguiente <div> tendrá un margen de 0.5rem en todos sus lados y un padding de 1.5rem en los laterales.

El siguiente <div>, estará centrado horizontalmente con respecto a su elemento padre y tendrá la mitad de su ancho.

Incluso puedes utilizar márgenes negativos (recuerda que en CSS no existe el padding negativo). Para hacerlo, tan solo tienes que incluir una ‘n’ delante del número de tamaño. Por ejemplo, mb-n2 para aplicar un margin negativo de valor 2 por debajo del elemento.

espaciado en bootstrap

Bordes

Para añadir bordes a un elemento con Bootstrap puedes utilizar la clase border. Si solamente quieres añadir un borde a uno de los lados del elemento, utiliza border-top, border-right, border-bottom o border-left.

También puedes aplicar los colores contextuales de Bootstrap a los bordes con las clases border-primary, border-secondary, border-success, border-danger, border-warning, border-info, border-light, border-dark y border-white. En este caso, debes añadir ambas clases, border y border-{color}; por ejemplo:

Hacer bordes redondeados es muy sencillo con Bootstrap. Añade la clase rounded para aplicarlos a todo el elemento. Si solamente los quieres en uno de los lados, utiliza las clases rounded-top, rounded-right, rounded-bottom, rounded-left. Si quieres un círculo perfecto o un elemento con forma de píldora o botón, usa las clases rounded-circle o rounded-pill. Finalmente, si quieres eliminar los bordes redondeados de un elemento que ya los tiene, emplea la clase rounded-0.

bordes en bootstrap

Display

La propiedad display de CSS es muy fácil de aplicar con las clases de Bootstrap. Y no solo eso, sino que además podremos aplicarla a determinados puntos de corte. Esto es especialmente útil al maquetar una web 100% responsive. Vamos a ver cómo funciona:

d-(valor) para xs en adelante
d-(punto de corte)-(valor) para sm, md, lg, and xl.

Los valores que puedes utilizar son:

–  none
–  inline
–  inline-block
–  block
–  table
–  table-cell
–  table-row
–  flex
–  inline-flex

display de bootstrap

Con esta estructura puedes hacer cosas realmente interesantes, como ocultar bloques solamente en vista móvil. Por ejemplo:

El <div> anterior estará oculto por defecto, ya que tiene la clase d-none (display: none;). Pero a partir del punto de corte ‘sm’ en adelante sí que se mostrará.

Posicionamiento de los elementos en Bootstrap

Vamos con otra utilidad muy importante: position en Bootstrap. El posicionamiento nos ayuda a colocar el bloque en la parte de la pantalla donde lo necesitemos. Para ello, tienes que utilizar la propiedad ‘position’ de CSS a través de las clases de Bootstrap que vas a ver a continuación:

–  position-static
–  position-relative
–  position-absolute
–  position-fixed
–  position-sticky

posiciones en bootstrap

También puedes fijar un elemento en los topes superior o inferior de la ventana con las clases fixed-top y fixed-bottom.

Pero la que para mí es la clase más interesante es sticky-top. Con ella podrás fijar un elemento a la parte superior de la ventana una vez has hecho scroll hasta él. Un ejemplo práctico de esto sería el bloque de “¿Conoces nuestras redes?” que tienes en la parte derecha de este blog o un menú como el que verás si haces scroll en nuestra web.

Texto

Al maquetar una web siempre vas a necesitar alinear bloques de texto. En Bootstrap es muy sencillo hacer esto, ya que existen unas clases específicas para ello. Te voy a mostrar las que puedes utilizar para cada caso:

text-left texto alineado a la izquierda
text-center texto centrado
text-right texto alineado a la derecha
text-justify texto justificado

textos en bootstrap

Si por el contrario, necesitas algo más exclusivo, no te preocupes. Si lo que quieres es aplicar un alineado sólo a un punto de corte concreto, lo que tienes que hacer es añadir después de ‘text-’ el punto de corte en cuestión. Por ejemplo: text-sm-center

textos responsive en bootstrap

En la imagen anterior, el centrado de texto solo se aplica en el tamaño ‘sm’ y superiores.

Alerts

Los alert de Bootstrap son como los alerts clásicos que has visto tantas veces por internet: una ventana que aparece de repente en el navegador con algún tipo de información para el usuario. Por ejemplo:

alert clasico bootstrap

Como ves, es muy soso. A día de hoy este tipo de avisos cuidan más su aspecto y Bootstrap nos ayuda con ello. En esta librería podrás encontrar diferentes aspectos para este tipo de elementos, por ejemplo:

alert bootstrap

Este es un ejemplo básico, pero puedes usar otras clases en lugar de “alert-primary” para cambiar el color del alert. Recuerda los sufijos de color que te expliqué en el apartado de “Colores”. En este caso, los que puedes utilizar son: *-primary, *-secondary, *-success, *-danger, *-warning, *-info, *-light, *-dark

Los alert de Bootstrap no sustituyen a los alerts por defecto del navegador. Simplemente son una opción más estética que puedes utilizar.

Además, puedes añadirle más elementos al alert de Bootstrap. Por ejemplo, un botón para cerrarla:

Para habilitar la funcionalidad de cerrar los alert, tienes que añadir el siguiente código antes de cerrar la etiqueta body:

Puedes hacerlo metiendo el código entre las etiquetas <script type=”text/javascript”>[Aquí tu código]</script> o llamando a un archivo .js creado manualmente. En ambos casos debes introducirlo justo antes de cerrar la etiqueta <body>.

Otra manera de habilitar la funcionalidad de cerrar los alert es hacerlo mediante “data attributes”, de la siguiente manera:

El código anterior pertenece al botón con el icono de una X que te permite cerrar el alert. Si te fijas, lleva añadido un atributo data-dismiss=”alert” que es lo que activará esta funcionalidad.

Badge

Otro elemento que incluye Bootstrap son las insignias o “badges”. Son una especie de etiquetas que sirven para destacar algún elemento, mostrar un conteo o simplemente resaltar alguna información extra.

Bootstrap te permite crearlas y meter contenido dentro de ellas usando el siguiente código:

Los sufijos de color que puedes aplicar a un elemento “badge” de Bootstrap son: *-primary, *-secondary, *-success, *-danger, *-warning, *-info, *-light, *-dark

También puedes usar la clase badge-pill para darle un aspecto con bordes redondeados a la etiqueta.

badge bootstrap

Breadcrumbs

Un elemento de navegación muy utilizado son las breadcrumbs o migas de pan. Sirven para que el usuario sepa en qué parte de tu sitio web se encuentra en cada momento. Incluir breadcrumbs con Bootstrap es tan sencillo como usar el siguiente código:

breadcrumbs bootstrap

Puedes añadir tantos elementos <li> a la lista como necesites. La clase “active” se utiliza para señalar el elemento actual de las migas de pan.

Buttons

Los botones son elementos muy utilizados en cualquier web. Gracias a ellos puedes orientar al usuario para que realice una acción, visite un enlace, etc. Aunque puede parecer una obviedad, es importante que tengan el aspecto de lo que son, botones, para que el usuario los identifique como tal. Los botones de Bootstrap vienen con unos estilos prefijados y los puedes utilizar con la clase ‘btn’.

En el ejemplo anterior estoy usando la etiqueta <button> de HTML, pero también puedes utilizar <a> o <input>.

Como ya habrás deducido, puedes utilizar los modificadores de color de Bootstrap mediante la clase btn-[modificador de color]. Por ejemplo, ‘btn-success’.

También puedes usar los modificadores de tamaño para cambiar las dimensiones del botón. Por ejemplo, ‘btn-lg’.

botones bootstrap

Button groups

En ocasiones puede que necesites agrupar una serie de botones para darle un aspecto más de menú o botonera. Puedes agrupar un conjunto de botones de Bootstrap en un solo bloque con la clase .btn-group. Para ello, tienes que englobar todos los botones en un <div> que lleve la clase antes mencionada. Por ejemplo:

Puedes hacer que este bloque de botones sea vertical. En lugar de usar la clase .btn-group, utiliza la clase .btn-group-vertical.

También puedes usar los modificadores de tamaño para cambiar las dimensiones de todos los botones a la vez. Un ejemplo sería:

grupo de botones de bootstrap

Cards

Una tarjeta o “card” de Bootstrap es un bloque de contenido que puede estar formado por una cabecera, un cuerpo (con imagen, título, descripción y botón) y un footer. Es importante que sepas que no tienen un ancho prefijado, sino que ocupan el ancho del elemento padre.

Un ejemplo básico sería:

cards bootstrap

Como te digo este es un ejemplo básico, pero realmente puedes incluir el contenido que quieras dentro de la tarjeta.

Las card de Bootstrap son útiles para crear una rejilla de contenido con un listado de elementos. Para hacerlo no tienes más que crear una estructura de filas y columnas e introducir cada elemento card dentro de una columna. Siguiendo estos pasos podrías crear, por ejemplo, un listado de artículos o unas tablas de precios.

Existen otras maneras de hacer agrupaciones de tarjetas. Puedes agrupar todos los elementos card dentro de un <div> con la clase card-group o card-deck. Pero en mi opinión no se adaptan tan bien al responsive como una estructura de filas y columnas.

Si quieres ver en profundidad todas las opciones y posibilidades del elemento card de Bootstrap, visita la documentación oficial.

Carousel

Un “carousel” de Bootstrap te permite crear un pase de diapositivas con el contenido que quieras. Por ejemplo, imagina que estás creando una tienda online y quieres mostrar varias fotos de los productos. En ese caso, usar un carrusel de imágenes o slider sería una buena opción.

En el siguiente ejemplo yo he utilizado imágenes, pero puedes incluir texto u otros elementos de Bootstrap (incluso filas y columnas).

carousel bootstrap

Los indicadores y flechas de desplazamiento son opcionales. Si no las necesitas puedes quitarlas sin problema.

Como ves, es un elemento bastante personalizable. Puedes cambiar el tipo de transición o el intervalo de desplazamiento entre diapositivas para adaptarlo a tus preferencias.

Modal

Una ventana modal de Bootstrap o pop-up es una ventana emergente que podemos lanzar para dar cierta información al usuario. Seguro que las has visto muchas veces, por ejemplo, con un formulario de suscripción a una newsletter u ofreciendo un descuento. Incluso algunos sitios web las utilizan cuando estás a punto de abandonar la página para aprovechar y darte algún tipo de recordatorio.

En Bootstrap, una ventana modal se crea de la siguiente manera:

modal bootstrap

Es importante que el botón tenga el atributo data-toggle=”modal” y que el atributo data-target tenga el mismo valor que el ID que le pongas a la ventana emergente.

Navs

Un elemento imprescindible en casi cualquier web es el menú. Gracias a él tus usuarios pueden navegar a través de tu página. En Bootstrap puedes crear un “nav” o menú de navegación creando una lista <ul> y añadiendo la clase nav. A cada elemento <li> de esa lista tienes que añadirle la clase nav-item. Finalmente, a cada enlace <a> de cada <li> añádele la clase nav-link.

Te quedará algo así:

navs bootstrap

Como puedes ver en el ejemplo, puedes destacar uno de los enlaces con la clase active.

Si quieres, puedes añadir las clases nav-tabs o nav-pills al <ul> para darle al menú un aspecto de pestañas o botones, respectivamente.

Tooltip

En Bootstrap un tooltip es un globo de información que aparece cuando pasas el ratón por encima de un elemento. Seguro que ya has visto tooltips en muchas páginas web. Y no solo en internet: Windows, por ejemplo, te informa mediante tooltips acerca de la fecha, tamaño y contenido de una carpeta cuando dejas el cursor encima de la misma.

Los tooltips que se usan en los sitios web siguen la misma idea. En Bootstrap es super fácil crear un ‘tooltip’. Se hace de la siguiente manera:

tooltips bootstrap

Como ves, puedes posicionar el tooltip encima, debajo o a los lados del elemento con el atributo data-placement. El texto que aparecerá dentro del globo es el que va dentro del atributo title.

Para habilitar el funcionamiento de los tooltips debes añadir el siguiente código jQuery: $(function () {$(‘[data-toggle=”tooltip”]’).tooltip() }) antes del cierre de la etiqueta <body>, tal y como te expliqué en el apartado de las “alerts”.

Snippets Bootstrap

Los snippets son fragmentos de código reutilizables que puedes integrar en tus proyectos fácilmente. En este caso puede tener código HTML, CSS y JavaScript.

Existen webs con un gran número de snippets para Bootstrap que puedes utilizar en tu sitio web con un simple copia-pega. También puedes ir creando tu propia librería con los que más suelas utilizar.

Por ejemplo, el siguiente snippet de la web bootstrapious.com te sirve para mostrar un listado de productos:

ejemplo snippet

Existen muchos sitios webs con snippets para Bootstrap, por ejemplo:

Plantillas para Bootstrap

Otra opción para crear tu web es que utilices una plantilla o “template” para Bootstrap. Una plantilla de Bootstrap es básicamente una estructura web ya creada y con unos estilos propios que el creador ha establecido. Está lista para usar, salvo porque normalmente vienen con imágenes y textos provisionales que tienes que cambiar. Por lo demás, en Bootstrap suelen ser totalmente personalizables, por lo que son una excelente forma de empezar a crear tu web.

Muchas veces, los themes están orientados a un tipo de negocio o a un tipo de sitio web. Puedes encontrar plantillas de Bootstrap para ecommerce, para sitios de reservas, para crear paneles de administración e incluso plantillas multipropósito.

Al elegir desde dónde descargar una plantilla de Bootstrap, tienes varias opciones. Por un lado está la propia biblioteca de plantillas oficial: https://themes.getbootstrap.com/ Son de pago, pero tienes la seguridad de que han sido desarrolladas por la misma gente que ha creado el framework, con la estabilidad que eso conlleva.

plantillas bootstrap

Por otro lado, si lo que quieres son plantillas de Bootstrap gratis también puedes encontrarlas. Eso sí, normalmente no son plantillas tan completas como las de pago. Suelen ser templates más básicos con los que tendrás que trabajar un poco más para adaptarlos a tu idea.

Puedes encontrar plantillas de Bootstrap 4 gratis en sitios como:

Conclusión

Personalmente, considero que Bootstrap es una de las mejores herramientas que puedes utilizar para maquetar un sitio web. Obviamente siempre puedes crear todo desde cero, pero Bootstrap te va a permitir ahorrar mucho tiempo con ciertas tareas (y lo digo por experiencia). Además, es un framework que sigue creciendo, aportando grandes novedades y con una gran comunidad en torno a él.

Y tú, ¿ya utilizas Bootstrap? ¿Te has quedado con ganas de saber algo más? ¡Deja un comentario! 🙂

Share on twitter
Compartir en Twitter
Share on facebook
Compartir en Facebook
Share on pinterest
Compartir en Pinterest

¿Te gusta el blog?

Apúntate al boletín y te enviaremos los mejores artículos una vez al mes.

¿Te ayudamos?

Escríbenos si tienes dudas o necesitas una solución específica. Nuestros expertos te ayudarán en todo lo posible.

Sé el primero en enterarte de ofertas, sorteos y novedades.

Tenemos 0 comentarios en

"Qué es Bootstrap y cómo usarlo"

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Aprovecha los precios más bajos del año! Contrata o renueva tu hosting o VPS SSD.​