Bootstrap es una librería de componentes según su propia definición, aunque en desarrollo es identificado como un framework. Con esta herramienta, los desarrolladores podemos implementar interfaces web ya diseñadas previamente con lo que ahorraremos tiempo y nos servirá de especial utilidad en el caso de que montemos una maqueta.

Fue inicialmente creado por los fundadores de Twitter para usar los estilos como maqueta de la red social. Hoy lo encontramos como proyecto abierto en Github, donde es posible contribuir.

Características de Bootstrap

Esta librería consta de unas características, entre las que destacamos:

  • Es una librería estable, por lo que no quedará en desuso fácilmente: El 82,3% de los usuarios que contestaron State of CSS afirmaron haberla usado en algún momento.

  • Dispone de una grilla de doce columnas completamente ajustable en función de los tamaños de los dispositivos.

  • Está diseñada siguiendo los principios mobile-first(diseñando primero los componentes para móviles) y siguiendo el responsive design para adaptarse a todo tipo de dispositivos. También usan tecnologías nuevas como Flexbox.

  • Existen multitudes de temas que puedes usar(gratis y de pago).

Versiones de Bootstrap

Esta librería cuenta con cuatro versiones, siendo Boostrap 4, la última de ellas y habilitada para producción.

Durante las cuatro versiones mencionadas se incluyeron cambios relevantes:

Versión Cambio reseñable
Bootstrap 2 Funcionalidad responsive
Bootstrap 3 Recreación desde cero para implementar en la base responsive y que el producto fuera mobile-first.
Bootstrap 4 Recreación de nuevo para migrar a SASS y para implementar Flexbox, usando las últimas propiedades de CSS y adaptándose a las nuevas versiones de navegadores.

Cómo funciona Bootrstrap

Bootstrap consta de unos archivos CSS y JS con los que únicamente necesitaremos incluir las clases necesarias para crear cada uno de los componentes.

En el caso de que necesitemos la librería para un proyecto más avanzado, tenemos la posibilidad de obtener los estilos de Bootstrap en archivos SCSS(un preprocesador de CSS) y hacer los cambios que necesitemos.

Para la mayoría de los casos basta con descargar la versión compilada y copiar los archivos CSS y JavaScript a nuestro proyecto, sin olvidar enlazarlos en el archivo HTML:

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

Para que el código Javascript(que sirve para algunos componentes avanzados o para animaciones) funcione, necesitamos también añadir las librerías jQuery y Popper.js:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

Cómo usar Bootstrap: Maquetar con Bootstrap

Una vez tengamos todos los archivos necesarios cargados, tendremos que maquetar en HTML lo que deseemos, aplicando las clases de boostrap que podemos encontrar en la documentación.

En esta ocasión, vamos a realizar un ejemplo con una grilla que tendrá como máximo 3 cards en desktop, 2 en tablet y 1 en móvil, mostrándose en esta versión como una columna:

Puedes ver el proyecto en producción aquí.

<div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="mb-3">Cursos de Frontend en OpenWebinars</h1>
            </div>
        </div>
        <div class="row align-items-center justify-content-around">
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card mb-3" style="height: 25rem;">
                    <img src="https://dc722jrlp2zu8.cloudfront.net/media/cache/bf/0d/bf0dc387dd32acc542951bb4d80488ef.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Curso de HTML5 y CSS3</h5>
                      <p class="card-text">Con este curso aprenderás lo que es HTML, CSS y la estructura de una página web, que te ayudarán a crear tu primera página web.</p>
                      <a href="#" class="card-link">Subscríbete</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card mb-3" style="height: 25rem;">
                    <img src="https://dc722jrlp2zu8.cloudfront.net/media/cache/af/04/af042bc6c4be03b20c4b72a3d6989104.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Curso de maquetación web con CSS</h5>
                      <p class="card-text">Con este curso aprenderás a crear de manera clara y eficaz la estructura de tu Web colocando los elementos donde tú deseas.</p>
                      <a href="#" class="card-link">Subscríbete</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card mb-3" style="height: 25rem;">
                    <img src="https://dc722jrlp2zu8.cloudfront.net/media/cache/be/d2/bed2880b8ff8f5657df985c157913098.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Curso de Flexbox y CSS Grid</h5>
                      <p class="card-text">Con este curso aprenderás toda la potencia de los nuevos contenedores que nos proporciona CSS3.</p>
                      <a href="#" class="card-link">Subscríbete</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card mt-3" style="height: 25rem;">
                    <img src="https://dc722jrlp2zu8.cloudfront.net/media/cache/89/aa/89aaa9669a5f61afbb0bfc24d7ee3cd8.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Curso de JavaScript Profesional</h5>
                      <p class="card-text">Con este curso aprenderás sobre entorno, navegadores, dispositivos, runtimes, Scope, Event Loop y Garbage Collector.</p>
                      <a href="#" class="card-link">Subscríbete</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card mt-3" style="height: 25rem;">
                    <img src="https://dc722jrlp2zu8.cloudfront.net/media/cache/35/10/351056a4b71aa7669a0881ea7cff8921.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Curso de cómo optimizar aplicaciones en Angular</h5>
                      <p class="card-text">Con este curso aprenderás paso a paso cómo optimizar aplicaciones en Angular, para hacerla más ligeras.</p>
                      <a href="#" class="card-link">Subscríbete</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card mt-3" style="height: 25rem;">
                    <img src="https://dc722jrlp2zu8.cloudfront.net/media/cache/94/a1/94a14a0647ba29fc97f71e9de5bec419.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Curso de fundamentos de PWA</h5>
                      <p class="card-text">Con este curso aprenderás a crear aplicaciones web instalables y gestionar notificaciones a través de aplicaciones web.</p>
                      <a href="#" class="card-link">Subscríbete</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Ventajas y desventajas de Bootstrap

El uso de esta librería de componentes lleva aparejado una serie de ventajas y desventajas, algunas de ellas son comunes a todos estos tipos de utilidades.

Algunas de las ventajas con las que nos encontramos son:

  • No necesitas pensar en diseño, ya que vienen todos los componentes diseñados.

    • Tienes la posibilidad de personalizar estos diseños, usando la base de Bootstrap y, en consecuencia, ahorrando tiempo.

  • Cuenta con componentes más avanzados como carruseles o dropdowns listos para usar sin tener que preparar ningunos scripts.

  • Cuenta con clases de utilidades para poner colores o bordes ya definidos.

También tiene sus desventajas:

  • Si utilizas sólo unos cuantos componentes e implementas Bootstrap de la forma simple estarás cargando más estilos de los que realmente estás usando y no estarás optimizando al máximo tu proyecto.

  • Si tu proyecto está en producción y utlizas los estilos de Bootstrap tal cual, tu sitio puede parecerse a otro o ser identificado facilmente tu diseño.

  • A pesar de que su curva de aprendizaje es baja, tendrás que acostumbrarte a trabajar con sus clases.

  • Si las versiones major se siguen haciendo desde cero, te será dificil actualizar de versión en versión

Una versión major es considerada cuando los cambios que se hacen con incompatibles entre sí, por lo que se cambia el primer número de la versión para indicar que es un cambio más grande que mejoras o añadidos(E.g.: Bootstrap 3 -> Bootstrap 4).