A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones
Editar en Github

Tutorial de Bootstrap: Aprende Bootstrap 4 en 10 minutos

Bootstrap viene a arreglar el 90% de los problemas de CSS
Componentes de Bootstrap 4

Bootstrap viene a arreglar el 90% de los problemas de CSS

Hay una luz al final del túnel y no es Chuck Norris con una linterna. ¡Finalmente alguien arregló CSS! Es una biblioteca hecha por Mark Otto y Jacob Thornton, personas normales, programadores como nosotros, y ¡es genial!

Dos chicos, mientras trabajaban en Twitter, estaban sufriendo los mismos problemas que nosotros con HTML y CSS. Hartos de esta situación (como tú y yo), decidieron crear una hoja base que puede importarse en cualquier sitio web. Esto hizo el trabajo de todos los desarrolladores front-end 4 veces más fácil.

bootstrap 4

Además, Bootstrap te da una gran cantidad de elementos nuevos que vas a querer usar siempre y que actualmente no existen en CSS+HTML: Los componentes de Bootstrap.

Layouts: Solucionado el modelo de cajas

Uno de los defectos en CSS, es la forma en que funcionan los layouts: trabajar con float, display y position ¡es lo peor! Así es como Bootstrap lo soluciona:

Ahora todo está dividido en Filas y Columnas

Los creadores de Bootstrap, replicaron el mismo concepto que tienen las <table>, pero en vez de usar tablas usaron <div> (contenedores de cajas). Ellos no podían crear sus propias etiquetas en HTML, porque eso requiere una nueva versión de HTML e iba a hacer a Bootstrap incompatible con los navegadores actuales. Las etiquetas debían ser las mismas, por eso decidieron anular el comportamiento que tiene un <div> por defecto con las clases.

1Esto es una fila: <div class="row"> 2Esto es una columna: <div class="col–sm–x">

bootstrap tutorial

Bootstrap ha dividido el ancho de la pantalla en 12 slots (espacios), cada uno de ellos con un ancho de fila total de 8.33%. El tamaño de una columna, puede ir de entre 1 y 12 slots o espacios.

Por otro lado, las columnas fueron hechas para vivir dentro de las filas (como pasa entre <td> y <tr>), siempre necesitas abrir una fila antes de abrir una columna. Todas las columnas en una fila deben sumar un máximo de 12 espacios.

bootstrap tutorial

Nuestro primer ejemplo de diseño:

Tal cual como lo hicimos en el capítulo sobre diseños, vamos a crear una página con dos grandes secciones, una barra lateral a la derecha y un contenido principal a la izquierda:

Bootstrap es 100% adaptable

Es muy fácil decidir como se verá tu página web en pantallas de diferente tamaño; cuando añades cada columna dentro de las filas, debes asignar una clase con el siguiente formato:

1<div class="col–md–x">
Colmdx
Significa que este elemento debe comportarse como una columna de Bootstrap.Significa que estoy especificando sólo para dispositivos con tamaño de pantalla mediano.Especifica cuantos espacios quiero que abarque la columna (recuerda que puede abarcar max 12 espacios por fila).

Tamaño de dispositivos en Bootstrap:

SmartphonesBig-phone/small-tabletTabletsDesktopsExtra-large desktops
Nothingsmmdlgxl

☝️ Nota: si no especificas el tamaño de pantalla (ej. usando 'sm', 'md', or 'xl'), el sitio web va a renderizar para teléfonos móviles por defecto.

Define móvil, tablet y escritorio/sobremesa (Desktop) al mismo tiempo

Vamos a configurar el diseño (usando las clases de columnas xs, sm, md y lg) para estas dos filas en todos los dispositivos al mismo tiempo:

bootstrap 4

1<!-- Apila las columnas en el móvil ocupando el ancho completo y el otro medio ancho --> 2<div class="row"> 3 <div class="col-12 col-md-8">.col-12 .col-md-8</div> 4 <div class="col-6 col-md-4">.col-6 .col-md-4</div> 5</div> 6 7<!-- Las columnas comienzan en un 50% de ancho en dispositivos móviles y alcanzan hasta un 33,3% de ancho en el Desktops --> 8<div class="row"> 9 <div class="col-6 col-md-4">.col-6 .col-md-4</div> 10 <div class="col-6 col-md-4">.col-6 .col-md-4</div> 11 <div class="col-6 col-md-4">.col-6 .col-md-4</div> 12</div> 13 14<!-- Las columnas son siempre del 50% de ancho, en dispositivos móviles y de Desktops --> 15<div class="row"> 16 <div class="col-6">.col-6</div> 17 <div class="col-6">.col-6</div> 18</div>

Estructura básica de Bootstrap 4

Ya sabemos sobre el esqueleto básico de HTML5 que todo sitio web debe tener. Ahora solo debes agregar unas líneas en tu esqueleto para hacerlo compatible con Bootstrap:

1<!doctype html> 2<html lang="en"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 10 11 <title>¡Hola, mundo!</title> 12 </head> 13 <body> 14 <h1>¡Hola, mundo!</h1> 15 16 <!-- Optional JavaScript --> 17 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 18 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 19 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 20 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 21 </body> 22</html>

Recuerda, Bootstrap es solo una hoja de estilos. Es por eso que es muy simple agregarlo a tu sitio web. Utiliza el <link> tag para incluir los estilos, y si quieres para usar la etiqueta de javascript <script> y así incluir los archivos de javascript de Bootstrap.

La funcionalidad de Javascript en Bootstrap requiere que se incluyan las librerías propias de jQuery y Javascript primero pero no te preocupes por esto aún. Sólo incluye las librerías de JS usando la etiqueta script y más adelante lo entenderás.

🔗 Encuentra aquí increíbles archivos de Bootstrap para que puedas empezar.

Componentes de Bootstrap 4

HTML es súper básico, sólo tiene un par de etiquetas - ya los sabíamos. Pero cuando revisas la web hoy en día, ves otra cosa… actualmente las páginas web tienen menús, íconos, barras de carga, etc. ¿Dónde están esas etiquetas? ¡Ninguna de ellas está definida en HTML!

Todos los desarrolladores tienen que simular estos elementos adicionales cada vez que crean un sitio web, tienen que hacer todo desde cero y eso toma muchísimo tiempo.

Cuando importas Bootstrap en tu página web, tendrás un nuevo conjunto de componentes a tu disposición. Esta es una pequeña parte de esos elementos:

bootstrap 4

Estos son los componentes más usados e importantes de Bootstrap:

Barra de navegación o NavBar

Aquí hay un ejemplo de cómo se ve un NavBar en un sitio web:

bootstrap tutorial

🔗Lee más sobre el "NavBar" aquí

1<nav class="navbar navbar-expand-lg bg-light"> 2 <div class="container"> 3 <a class="navbar-brand d-flex align-items-center" href="#"> 4 <i class="fa-brands fa-instagram mr-1"></i> 5 <span>Instagram</span> 6 </a> 7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" 8 aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 9 <span class="navbar-toggler-icon"></span> 10 </button> 11 <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> 12 <ul class="navbar-nav align-items-center"> 13 <li class="nav-item active"> 14 <a class="nav-link" href="#"> 15 <span class="btn btn-success"> 16 Create a new post 17 </span> 18 </a> 19 </li> 20 <li class="nav-item dropdown"> 21 <a class="nav-link dropdown-toggle text-secondary" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" 22 aria-haspopup="true" aria-expanded="false"> 23 <i class="fa-solid fa-gear"></i> 24 </a> 25 <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 26 <a class="dropdown-item" href="#">Action</a> 27 <a class="dropdown-item" href="#">Another action</a> 28 <a class="dropdown-item" href="#">Something else here</a> 29 </div> 30 </li> 31 </ul> 32 </div> 33 </div> 34</nav>

Card

Este es probablemente el componente de Bootstrap más usado, cada sitio web tiene unas cuantas "Card" porque es ideal para listar objetos de una forma bonita. Algunos ejemplos del uso de "Card" pueden ser:

  • La sección de "equipo" de un sitio web donde listas los distintos empleados.
  • Un típico muro de Pinterest.
  • Cualquier historia de una red social como Instagram, Facebook, twitter, etc.

Aquí hay un ejemplo de cómo puede verse un sitio web con una "Card":

bootstrap 4

🔗 Lee más sobre la "Card" aquí

1<div class="card" style="width: 20rem;"> 2 <img class="card-img-top" src="..." alt="Card image cap"> 3 <div class="card-body"> 4 <h4 class="card-title">Card title</h4> 5 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 6 <a href="#" class="btn btn-primary">Go somewhere</a> 7 </div> 8</div>

El Modal

Todo el mundo odia el modal, es muy molesto, ¡siempre pregunta si te quieres inscribir a una revista! 🙂

Así es como se ve modal por defecto con Bootstrap.

bootstrap 4

🔗Lee más sobre el "Modal" aquí

1div class="modal" tabindex="-1" role="dialog"> 2 <div class="modal-dialog" role="document"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <h5 class="modal-title">Modal title</h5> 6 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 7 <span aria-hidden="true">&times;</span> 8 </button> 9 </div> 10 <div class="modal-body"> 11 <p>Modal body text goes here.</p> 12 </div> 13 <div class="modal-footer"> 14 <button type="button" class="btn btn-primary">Save changes</button> 15 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 16 </div> 17 </div> 18 </div> 19</div>

☝️ Importante! El Modal necesita Javascript para poder funcionar. Recuerda incluir los archivos de Javascript necesarios en el típico esqueleto de Bootstrap: jQuery, Popper and Bootstrap.js

Lo que realmente necesitas saber sobre Bootstrap

¡¡La documentación oficial de Bootstrap es increíble!! No necesitamos copiar y pegar todos los post. Por favor visita los siguientes sitios web y enfócate en leer estos temas:

| ☝️ Versiones de Bootstrap y su descarga:

Bootstrap tiene varias versiones, siempre verifica que estés usando la última versión de Bootstrap en tu proyecto. Aquí podrás encontrar todas las versiones disponibles:https://getbootstrap.com/docs/versions/.

Te recomendamos que uses el CDN para importar bootstrap en tu archivo HTML, de este modo: https://www.bootstrapcdn.com/

Si estás migrando tu proyecto a nueva versión de Bootstrap, recuerda siempre verificar su documentación.

Gana RESPETO.

El éxito no llega de la noche a la mañana; este es tu primer logro. Déjame preguntarte ¿te sientes capaz de usar HTML, CSS, Layouts y Bootstrap? ¡No te mientas!

No más Lecciones sobre este tema, es momento de entregar. Es hora de enfocarse en el proyecto de clase... Recuerda honrar los valores de los desarrolladores. Calma.