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!

¡Suscríbete a nuestro boletín!

¡No te enviaremos spam, lo prometemos! Enviamos a nuestros suscriptores nuestro contenido en WordPress, hosting, marketing digital y programación.

Enviar

Este campo es obligatorio.

+ Información básica sobre protección de datos

• Responsable:

  RAIOLA NETWORK, S.I. C.I.F.: B27453489 Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo) Telefono: +34 982776081 e-mail: info@raiolanetworks.es

• Finalidad:

  Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.

• LEGITIMACIÓN:

  Consentimiento del interesado y contratación de productos y/o servicios del Responsable

• Destinatario

  No se ceden datos a terceros, salvo obligación legal. Personas físicas o jurídicas directamente relacionadas con el Responsable Encargados de Tratamiento adheridos al Privacy Shield

• DERECHOS:

  Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.

• INFORMACIÓN ADICIONAL:

  Se puede consultar la política de privacidad de forma más detallada aquí.

Ha leído y acepta nuestra política de privacidad *

¡Te has suscrito a nuestro newsletter!

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.

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.

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.

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 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)

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:

¿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!
 

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:
 

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”.

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.

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:

<link rel="stylesheet" href="css/bootstrap.min.css" />

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:

<script src="js/jquery-3.5.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

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

<!DOCTYPE html>
<html lang="es">
    <head>
        <!-- Meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <title>El título de tu página</title>
    </head>
    <body>

        <!-- Aquí va el contenido de tu web →

        <!-- JavaScript -->
        <script src="js/jquery-3.5.1.slim.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

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

<!doctype html>
<html lang="es">
  ...
</html>

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:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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.

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:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>El título de tu página</title>
  </head>
  <body>

    <!-- Aquí va el contenido de tu web -->

    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

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.

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:

$ npm install bootstrap

–  yarn

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

$ yarn add bootstrap

–  RubyGems

Si usas Bundler:

gem 'bootstrap', '~> 4.5.2'

Si no usas Bundler:

$ gem install bootstrap -v 4.5.2

–  Composer

Si trabajas con PHP, usa el siguiente comando:

$ composer require twbs/bootstrap:4.5.2

–  NuGet

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

Para Bootstrap CSS

PM > Install-Package bootstrap

Para Bootstrap SASS

PM> Install-Package bootstrap.sass

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.
 

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:

// Con esta función añadirás el archivo CSS de Bootstrap al head de tu tema
function css_bootstrap() {
	wp_enqueue_style( 'css_bootstrap', 
  					get_stylesheet_directory_uri() . '/css/bootstrap.min.css', 
  					array(), 
  					'4.5.2'
  					); 
}
add_action( 'wp_enqueue_scripts', 'css_bootstrap');

// Con esta función añadirás el archivo JS de Bootstrap a la cola de scripts de tu tema
function js_bootstrap() {
	wp_enqueue_script( 'js_bootstrap', 
  					get_stylesheet_directory_uri() . '/js/bootstrap.min.js', 
  					array('jquery'), 
  					'4.5.2', 
  					true); 
}
add_action( 'wp_enqueue_scripts', 'js_bootstrap');

En el caso de que decidas incluir Bootstrap a través de los links del CDN, estas son las líneas de código que tienes que incluir:

// CSS Bootstrap
function css_bootstrap() {
	wp_enqueue_style( 'css_bootstrap', 
  					'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', 
  					array(), 
  					'4.5.2'
  					); 
}
add_action( 'wp_enqueue_scripts', 'css_bootstrap');


// JS Bootstrap
function js_bootstrap() {
	wp_enqueue_script( 'js_bootstrap', 
  					'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js', 
  					array('jquery'), 
  					'4.5.2', 
  					true); 
}
add_action( 'wp_enqueue_scripts', 'js_bootstrap');

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.
 

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.

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.

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!
 

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:

<div class="container">
<div class="row">
<div class="col">
Columna 1
</div>
<div class="col">
Columna 2
</div>
<div class="col">
Columna 3
</div>
</div>
</div>

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:

<div class="container">
<div class="row">
<div class="col-3">
Columna 1
</div>
<div class="col-6">
Columna 2
</div>
<div class="col-3">
Columna 3
</div>
</div>
</div>

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).

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:

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.
 

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/

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:

<div class=”bg-success text-white”>Ejemplo de colores de fondo y texto en Bootstrap</div>

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.

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.

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:

{propiedad}{lados}-{tamaño}

En «propiedad» puedes utilizar:

En «lados» puedes utilizar:

En «tamaño»:

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.

<div class=”mt-1”>...</div>

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

<div class=”m-2 px-4”>...</div>

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

<div class=”w-50 mx-auto”>...</div>

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.

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:

<span class="border border-primary"></span>

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.

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:

Los valores que puedes utilizar son:

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

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

<div class=”d-none d-sm-block”></div>

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á.
 

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

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.
 

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:

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

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

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:

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:

<div class="alert alert-primary" role="alert">
  Lorem ipsum.
</div>

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:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  <button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

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

jQuery: $('.alert').alert()

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:

<button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
  <span aria-hidden="true">&times;</span>
</button>

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.
 

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:

<span class="badge badge-secondary">Etiqueta</span>

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.

<span class="badge badge-pill badge-secondary">Etiqueta</span>

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:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">Inicio</a></li>
		<li class="breadcrumb-item"><a href="#">Nivel 1</a></li>
		<li class="breadcrumb-item active" aria-current="page">Nivel 2</li>
	</ol>
</nav>

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.
 

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’.

<button type="button" class="btn btn-primary">Texto del botón</button>

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’.

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:

<div class="btn-group" role="group" aria-label="Grupo de botones">
<button type="button" class="btn btn-primary">Botón 1</button>
<button type="button" class="btn btn-secondary">Botón 2</button>
<button type="button" class="btn btn-warning">Botón 3</button>
</div>

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:

<div class="btn-group btn-group-lg" role="group" aria-label="Grupo de botones">[Aquí tus botones]</div>

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:

<div class="card" style="width: 350px;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Titulo</h5>
    <p class="card-text">Aquí puedes incluir un texto.</p>
    <a href="#" class="btn btn-primary">Botón</a>
  </div>
</div>

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.
 

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).

<div id="ejemploCarousel" class="carousel slide" data-ride="carousel">
	<ol class="carousel-indicators">
		<li data-target="#ejemploCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#ejemploCarousel" data-slide-to="1"></li>
		<li data-target="#ejemploCarousel" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="..." class="d-block w-100" alt="...">
		</div>
		<div class="carousel-item">
			<img src="..." class="d-block w-100" alt="...">
		</div>
		<div class="carousel-item">
			<img src="..." class="d-block w-100" alt="...">
		</div>
	</div>
	<a class="carousel-control-prev" href="#ejemploCarousel" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Anterior</span>
	</a>
	<a class="carousel-control-next" href="#ejemploCarousel" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Siguiente</span>
	</a>
</div>

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.
 

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:

<!-- Botón para abrir el Pop-up -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popup">
  Abrir Pop-up
</button>

<!-- Modal -->
<div class="modal fade" id="popup" tabindex="-1" aria-labelledby="popupLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="popupLabel">Título</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Contenido del Pop-up
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

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.
 

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í:

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" href="#">Item 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Item 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Item 3</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Item 4</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Item 5</a>
    </li>
</ul>

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.
 

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:

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip en la parte superior
</button>

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».

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:

<div class="row">
		    <div class="col-lg-8 mx-auto">
		        <!-- List group-->
		        <ul class="list-group shadow">
		            <!-- list group item-->
		            <li class="list-group-item">
		                <!-- Custom content-->
		                <div class="media align-items-lg-center flex-column flex-lg-row p-3">
		                    <div class="media-body order-2 order-lg-1">
		                        <h5 class="mt-0 font-weight-bold mb-2">Awesome product</h5>
		                        <p class="font-italic text-muted mb-0 small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit fuga autem maiores necessitatibus.</p>
		                        <div class="d-flex align-items-center justify-content-between mt-1">
		                            <h6 class="font-weight-bold my-2">$120.00</h6>
		                            <ul class="list-inline small">
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star-o text-gray"></i></li>
		                            </ul>
		                        </div>
		                    </div>
		                    <img src="https://res.cloudinary.com/mhmd/image/upload/v1556485076/shoes-1_gthops.jpg" alt="Generic placeholder image" width="200" class="ml-lg-5 order-1 order-lg-2" />
		                </div>
		                <!-- End -->
		            </li>
		            <!-- End -->

		            <!-- list group item-->
		            <li class="list-group-item">
		                <!-- Custom content-->
		                <div class="media align-items-lg-center flex-column flex-lg-row p-3">
		                    <div class="media-body order-2 order-lg-1">
		                        <h5 class="mt-0 font-weight-bold mb-2">Awesome product</h5>
		                        <p class="font-italic text-muted mb-0 small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit fuga autem maiores necessitatibus.</p>
		                        <div class="d-flex align-items-center justify-content-between mt-1">
		                            <h6 class="font-weight-bold my-2">$99.00</h6>
		                            <ul class="list-inline small">
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                            </ul>
		                        </div>
		                    </div>
		                    <img src="https://res.cloudinary.com/mhmd/image/upload/v1556485077/shoes-3_rk25rt.jpg" alt="Generic placeholder image" width="200" class="ml-lg-5 order-1 order-lg-2" />
		                </div>
		                <!-- End -->
		            </li>
		            <!-- End -->

		            <!-- list group item -->
		            <li class="list-group-item">
		                <!-- Custom content-->
		                <div class="media align-items-lg-center flex-column flex-lg-row p-3">
		                    <div class="media-body order-2 order-lg-1">
		                        <h5 class="mt-0 font-weight-bold mb-2">Awesome product</h5>
		                        <p class="font-italic text-muted mb-0 small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit fuga autem maiores necessitatibus.</p>
		                        <div class="d-flex align-items-center justify-content-between mt-1">
		                            <h6 class="font-weight-bold my-2">$140.00</h6>
		                            <ul class="list-inline small">
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star-o text-gray"></i></li>
		                            </ul>
		                        </div>
		                    </div>
		                    <img src="https://res.cloudinary.com/mhmd/image/upload/v1556485078/shoes-2_g4qame.jpg" alt="Generic placeholder image" width="200" class="ml-lg-5 order-1 order-lg-2" />
		                </div>
		                <!-- End -->
		            </li>
		            <!-- End -->

		            <!-- list group item -->
		            <li class="list-group-item">
		                <!-- Custom content-->
		                <div class="media align-items-lg-center flex-column flex-lg-row p-3">
		                    <div class="media-body order-2 order-lg-1">
		                        <h5 class="mt-0 font-weight-bold mb-2">Awesome product</h5>
		                        <p class="font-italic text-muted mb-0 small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit fuga autem maiores necessitatibus.</p>
		                        <div class="d-flex align-items-center justify-content-between mt-1">
		                            <h6 class="font-weight-bold my-2">$220.00</h6>
		                            <ul class="list-inline small">
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                                <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
		                            </ul>
		                        </div>
		                    </div>
		                    <img src="https://res.cloudinary.com/mhmd/image/upload/v1556485078/shoes-4_vgfjy9.jpg" alt="Generic placeholder image" width="200" class="ml-lg-5 order-1 order-lg-2" />
		                </div>
		                <!-- End -->
		            </li>
		            <!-- End -->
		        </ul>
		        <!-- End -->
		    </div>
		</div>

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

• bootstrapious.com
• bootdey.com
• bootsnipp.com

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.

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:

• https://startbootstrap.com/
• https://bootswatch.com/
• https://bootstrapmade.com/

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! 🙂