Es una gran herramienta para CSS, ya que con Bootstrap podrás crear interfaces, diseñar y personalizar sitios web con el kit de herramientas de código abierto de front-end que te ofrece, y por su diseño responsive adaptable a cualquier tipo de dispositivo y pantalla logrando una buena experiencia de usuario (UX). Además te ofrece herramientas que te permitirán hacer uso de estilos y elementos de sus librerías y es compatible con la gran mayoría de navegadores web usados actualmente.

 

¿Qué es Bootstrap?

Es un framework front-end de CSS con el cual puedes dar formas y estilos a un sitio web, fue desarrollado en 2010 por twitter. Antes de ser código abierto se le conocía como “Twitter Blueprint” y era usado para estandarizar las herramientas de la empresa.

Es una herramienta que te permite crear interfaces de usuarios sencillas y ordenadas y sobre todo es completamente responsive esto quiere decir que se adapta a cualquier tipo de pantalla y dispositivo, usando el diseño mobile-first.

Y, ¿Qué es un framework?

Un framework es una estructura previa que se puede usar en cualquier otro proyecto, es decir un entorno que facilita la programación de una aplicación, un sitio web, o un software.

Consta de librerías previamente creadas que facilitaran tu trabajo como desarrollador, existe gran diversidad de frameworks para diferentes lenguajes como laravel, symfony 4, etc.

Ventajas de Bootstrap

Al hacer uso de plantillas prediseñadas en HTML y CSS se facilita el trabajo de un desarrollador, ya que te ayuda en desarrollar una buena idea para una página web desde cero. La integración a cualquier documento HTML es fácil gracias a su estructura modular y puedes ahorrar tiempo y esfuerzo al no tener que realizar muchas de las configuraciones de CSS. Encontrarás elementos como:

• Barras de navegación
• Menús desplegables
• Botones
• Alertas
• Formularios, etc.

En la siguiente imagen podrás observar un ejemplo de una página de precios creada con Bootstrap con los componentes de “cards”.

Dentro de las muchas ventajas que tiene este framework, aquí te mencionamos algunas de las más importantes:

Diseño responsive.

Hoy en día contar con un diseño responsive en un sitio web es importante para la experiencia de usuario como para el algoritmo de Google, con bootstrap no tendrás de que preocuparte por eso, ya que podrás crear sitios web con CSS y javascript completamente adaptables para cualquier tipo de pantalla y dispositivo gracias a su Grid system.

Fácil de usar.

Solo necesitas conocimientos básicos de HTML y CSS para hacer uso de este framework y ahorrarás tiempo, ya que cuenta con elementos predefinidos como formularios, tablas, barras de navegación, tipografías, etc. Y los podrás personalizar si así lo deseas.

Compatibilidad.

Es compatible con las últimas versiones estables de los navegadores actuales como:

• Google chrome
• Mozilla firefox
• Opera
• Internet explorer y Microsoft Edge
• Safari

Si requieres más información sobre con cuáles navegadores y en que versiones es compatible:

# https://github.com/browserslist/browserslist#readme

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
# needed since Legacy Edge still has usage; 79 was the first Chromium Edge version
# should be removed in the future when its usage drops or when it's moved to dead browsers
not Edge < 79
Firefox ESR
iOS >= 10
Safari >= 10
Android >= 6
not Explorer <= 11

En caso de los dispositivos móviles es compatible con las últimas versiones de los navegadores predeterminados de cada plataforma principal.

Chrome	Firefox	Safari	Android Browser & WebView
Android	Supported	Supported	—                                              v6.0+
iOS	Supported	Supported	Supported                                   —

Fuente: https://getbootstrap.com/ 

En el sitio oficial de Bootstrap encontrarás información más específica sobre la compatibilidad con navegadores y dispositivos.

En constante actualización.

En agosto de 2011 fue el lanzamiento de Bootstrap como framework de código abierto, y desde entonces han tenido más de veinte lanzamientos.

Cuentan con un equipo de desarrolladores realizando mejoras y actualizaciones constantes, además de estar agregando nuevas funcionalidades.

Versiones:

• v1.x
• v2.x
• v3.x
• v4.x
• Actualmente v5.x en su fase beta.

Grid System.

Con su sistema de cuadrícula que te permite maquetar por columnas, será más fácil el posicionamiento de cada uno de los elementos y el contenido se adaptara en función del tamaño de la pantalla de donde se esté visualizando.

Integración con JavaScript.

Solo es necesario integrar la biblioteca de jQuery en tu documento HTML y tendrás la posibilidad de agregar elementos de JS. Sin embargo en la versión v5.x que se encuentra en desarrollo se elimina el jQuery y es javascript puro y con esto habrá mejoras.

Funcionalidad y estructura

Para que Bootstrap funcione de una forma óptima es necesario tomar en cuenta diferentes aspectos como el uso del class container, el grid system, los breakpoints, etc. Por eso aquí te dejamos las reglas que se deben de seguir en grid system, así como que clases son las que se tienen que usar, los tipos de container que hay y como funciona cada uno y los aspectos que consideramos importantes para el uso de Bootstrap.

Diseño responsive

Para asegurar la característica del diseño responsive es necesario hacer uso de etiquetas como <div> y el uso del class container.

Un elemento <div> te permite agrupar contenido o crear secciones, idóneo para estructurar la página de una forma adaptable.

Bootstrap asigno la característica class container al elemento <div> con la finalidad de determinar las dimensiones apropiadas para los elementos incluidos en este espacio, contienen, alinean o rellenan el contenido dependiendo del tamaño de pantalla y dispositivo.

Son tres contenedores (class container) diferentes:

• .container, que establece un ancho máximo en cada responsive breakpoint.
• .container-fluid, donde el ancho es el 100% en todos los breakpoints.
• .container-{breakpoint}, que el ancho es el 100% hasta que se especifique el breakpoint.

En la siguiente tabla se puede ver como se compara el max-width con el original:

	Extra pequeño <576px	Pequeño ≥576px	Medio ≥768px	Grande ≥992px	X-grande ≥1200px	XX-Large ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

Fuente: Sitio oficial de Bootstrap https://getbootstrap.com/

Grid System

Su sistema de cuadrícula te permite diseñar y alinear el contenido por medio de contenedores, filas y columnas.

El “grid system” consta de 12 columnas que se pueden agrupar conforme se requiera, las clases a usar son: col (columna), row (fila) y container (contenedor) que van dentro de la etiqueta <div> , con el atributo class:

<div class="container">
  <div class="row">
    <div class="col-sm">

Reglas dentro del grid system:

1. Las filas (row) deben colocarse dentro de un contenedor (container).
2. Las filas (row) únicamente pueden contener columnas (col).
3. Las columnas (col) tienen que ser hijo inmediato de una fila (row).

Recuerda que las filas y columnas siempre funcionan juntas. Te recomiendo seguir estas reglas, te puede ahorrar muchos dolores de cabeza.

Otro punto importante dentro del Bootstrap grid son los 6 puntos de interrupción predeterminados “breakpoints” que son los encargados de como cambia la respuesta del diseño dependiendo del tamaño de la ventana gráfica, que son:

Breakpoint	Tamaño	Prefijo de clase
Extra pequeño (xs)	<576px	.col-
Pequeño (sm)	≥576px	.col-sm-
Medio (md)	≥768px	.col-md-
Grande (lg)	≥992px	.col-lg-
Extra grande (xl)	≥1200px	.col-xl-
Extra extra grande (xxl)	≥1400px	.col-xxl-

 

Recuerda que para Bootstrap es “mobile first” por eso su “breakpoint” predeterminado es (xs).

Usando la clase “col”

Las columnas que hagas usando la clase “col”, se adaptaran al ancho de tu fila; es decir si creas 2 columnas cada una ocupara el 50% del ancho de tu fila.

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

En caso de que no quieras que el ancho de las columnas sea el mismo, y prefieres que sea variable según el tamaño del contenido puedes hacer uso de los breakpoints

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

En la documentación de bootstrap puedes encontrar más formas de personalización del grid system para que te sea más fácil su uso.

Componentes de Bootstrap

La cantidad de componentes con los que cuenta Bootstrap es bastante amplia por eso te mencionamos algunas de las más importantes.

Alertas

Podrás crear diferentes tipos de alertas con colores específicos según lo requieras, hay alertas con enlaces y con contenido adicional.

Botones

Encontrarás varios estilos de botones predefinidos, que podrás usar en formularios, llamados a la acción, etc.

Carrusel

Es un componente de presentación de diapositivas en forma de carrusel que te permitirá visualizar una serie de contenido (imágenes o diapositivas con texto). Y puedes tener controles de visualización como los indicadores de anterior/siguiente.

Barra de navegación

Con este componente tendrás diferentes formas en la presentación de un menú, además de personalizarlo a tus necesidades.

En caso de que quieras ver todos los componentes de Bootstrap te invitamos a ver la documentación.

Como comenzar a usar Bootstrap

Bootstrap básicamente se compone de dos directorios el de JS y el de CSS que son los encargados de asignar las características a cada uno de los elementos de la página.

Para iniciar a hacer uso de este framework puedes comenzar con descargarlo y añadir los archivos manualmente, puedes añadirlos a tu proyecto mediante el CDN agregando los siguientes scripts en la cabecera de tu HTML o puedes instalarlo con un gestor de paquetes.

¿Dónde descargar Bootstrap?

Puedes comenzar descargando desde la página oficial de Bootstrap el paquete que contiene los archivos de CSS y JS compilados, así como los archivos fuente y temas opcionales.
Después descomprime el archivo en el directorio deseado.
La versión más reciente al día de hoy es 5.0x que está en beta, por eso te recomiendo hacer uso de la versión 4.6.x por el momento.

Añadir CDN en mi HTML

Para agregar Bootstrap sin tener que descargar los archivos puedes añadir a tu archivo los script en la cabecera <head> de tu HTML para CSS y antes de la etiqueta de cierre </body> para JS que encontraras aquí, y con esto ya notarás cambios en la página web.

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Usando Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

</head>
<body>
    <h1>Hola Mundo</h1>
    <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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>

Instalación con Gestor de paquetes

Otra forma de descargar este framework es a través del gestor de paquetes, a continuación te dejo la sintaxis que necesitarías para los administradores de paquetes:

npm

Para instalar bootstrap en Node.js :

npm install bootstrap@next

Yarn

Para instalar bootstrap en Node.js :

yarn add bootstrap@next

RubyGems

Para instalarlo en Ruby si estas usando Bundler:

gem 'bootstrap', '~> 5.0.0.beta1'

Y una alternativa si no lo estas usando es:

gem install bootstrap -v 5.0.0.beta1

Composer

Si estas usando PHP:

composer require twbs/bootstrap:5.0.0-beta1

NuGet

Si estas trabajando en .NET:

Install-Package bootstrap

Install-Package bootstrap.sass

Bootstrap 5.0

Actualmente se encuentra en desarrollo la versión v5.x, donde se están enfocando en realizar mejoras al código base, en mejorar los componentes y las características de los existentes, se eliminaran algunas de las compatibilidades con los navegadores más antiguos y algo importante que destacar de esta versión es que se elimina la librería jquery para JavaScript para hacer uso de JS puro.

En resumen …

Con este framework no tendrás que preocuparte por las media queries y los porcentajes de css para lograr un sitio responsive, encontraras muchos componentes para personalizar un sitio web, además de que cuenta con temas que podrás integrar en WordPress.

Como podrás ver es un framework que cuenta con muchas ventajas, sin embargo se recomienda trabajar con él desde el inicio y no querer integrarlo después de haber iniciado algunos estilos, ya que podrían romperse y se tienen que hacer ajustes que pueden volverse tediosos.