{"id":28204694,"url":"https://github.com/certidevs/curso-2025-05-bootstrap","last_synced_at":"2025-08-23T02:05:05.905Z","repository":{"id":293484292,"uuid":"983539496","full_name":"certidevs/curso-2025-05-bootstrap","owner":"certidevs","description":"Curso Bootstrap CSS 5.3.6","archived":false,"fork":false,"pushed_at":"2025-05-22T16:09:40.000Z","size":1302,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-22T15:10:16.329Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/certidevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-14T14:30:18.000Z","updated_at":"2025-05-22T16:09:43.000Z","dependencies_parsed_at":"2025-05-16T00:15:09.339Z","dependency_job_id":null,"html_url":"https://github.com/certidevs/curso-2025-05-bootstrap","commit_stats":null,"previous_names":["certidevs/curso-2025-05-bootstrap"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/certidevs/curso-2025-05-bootstrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/certidevs%2Fcurso-2025-05-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/certidevs%2Fcurso-2025-05-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/certidevs%2Fcurso-2025-05-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/certidevs%2Fcurso-2025-05-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/certidevs","download_url":"https://codeload.github.com/certidevs/curso-2025-05-bootstrap/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/certidevs%2Fcurso-2025-05-bootstrap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271732346,"owners_count":24811309,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-17T07:09:34.922Z","updated_at":"2025-08-23T02:05:05.816Z","avatar_url":"https://github.com/certidevs.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap CSS\n\nAño lanzamiento Bootstrap CSS: 2011\n\nAño lanzamiento Tailwind CSS: 2017\n\nVersión Bootstrap: 5.3.6\n\nRepo: https://github.com/twbs/bootstrap\n\n\n## Instalación:\n\nhttps://getbootstrap.com/docs/5.3/getting-started/introduction/\n\nSe importa mediante 2 links: CSS y JavaScript.\n\nEl JavaScript es para los componentes interactivos: dropdown, modal, accordion, popovers...\n\n* https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css\n* https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js\n\n\n# Esquema de aprendizaje:\n\n## Utilidades básicas\n\nBootstrap CSS aplica ciertos estilos ya por defecto sin que los especifiquemos nosotros:\n\nhttps://getbootstrap.com/docs/5.3/content/reboot/\n\n### Tipografía y textos\n\n* h1, h2, h3, h4, h5, h6\n* display-1, display-2, display-3, display-4, display-5, display-6\n* lead\n\n* text-center, text-end, text-start\n* text-sm-end, text-md-end, text-lg-end, text-xl-end, text-xxl-end\n\n* fs-1, fs-2, fs-3, fs-4, fs-5, fs-6\n\n* text-lowercase, text-uppercase, text-capitalize\n\n* fst-normal, fst-italic\n\n* fw-lighter, fw-light, fw-normal, fw-medium, fw-semibold, fw-bolder, fw-bold\n\n* lh-1, lh-sm, lh-base, lh-lg\n\n* font-monospace\n\n* text-decoration-none, text-decoration-underline, text-decoration-line-through\n\n* text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark\n\n* text-wrap, text-nowrap\n\n* overflow-auto, overflow-hidden, overflow-visible, overflow-scroll\n* overflow-x-auto, overflow-x-hidden, overflow-x-visible, overflow-x-scroll\n* overflow-y-auto, overflow-y-hidden, overflow-y-visible, overflow-y-scroll\n\n* text-truncate\n\n\n### Links\n\nDesde 5.3:\n\nhttps://getbootstrap.com/docs/5.3/utilities/link/\n\n* link-primary, link-secondary, link-success, link-danger, link-warning, link-info, link-light, link-dark\n\n* stretched-link (hace clicable todo el contenedor que envuelve un link)\n\n\n### Colores\n\n* Nomenclatura: primary, secondary, success, danger, warning, info, light, dark\n\n* text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark\n\n* bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark\n\n* border-primary, border-secondary, border-success, border-danger, border-warning, border-info, border-light, border-dark\n\n* btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark\n\n* text-opacity-75, text-opacity-50, text-opacity-25\n\n* text-body\n\n* text-black, text-white, text-black-50, text-white-50\n\nLo nuevo en boostrap 5.3:\n\n* text-{color}-emphasis para dar mejor contraste en modo claro y oscuro\n* bg-{color}-subtle y border-{color}-subtle para hacer más sutil el uso de fondos y bordes\n* text-body-secondary, text-body-tertiary\n* Se ha quitado text-muted\n\n### Fondo (Background)\n\nEl sufijo subtle es nuevo en 5.3 de bootstrap, sirve para quitarle importancia a fondos y bordes para que no resalten tanto, por eso lo de subtle (sutil).\n\n* bg-primary, bg-primary-subtle\n* bg-secondary, bg-secondary-subtle\n* bg-success, bg-success-subtle\n* bg-danger, bg-danger-subtle\n* bg-warning, bg-warning-subtle\n* bg-info, bg-info-subtle\n* bg-light, bg-light-subtle\n* bg-dark, bg-dark-subtle\n* bg-body-secondary, bg-body-tertiary\n* bg-black, bg-white\n* bg-transparent\n\n* bg-primary bg-gradient\n* bg-secondary bg-gradient\n* bg-success bg-gradient\n* bg-danger bg-gradient\n* bg-warning bg-gradient\n* bg-info bg-gradient\n* bg-light bg-gradient\n* bg-dark bg-gradient\n* bg-black bg-gradient\n\n* bg-success bg-opacity-75\n* bg-success bg-opacity-50\n* bg-success bg-opacity-25\n\n\n\n### Bordes\n\n* border\n* border-top\n* border-end\n* border-bottom\n* border-start\n\n* border border-1\n* border border-2\n* border border-3\n* border border-4\n* border border-5\n\n* border border-primary\n* border border-primary-subtle\n* border border-secondary\n* border border-secondary-subtle\n* border border-success\n* border border-success-subtle\n* border border-secondary-subtle\n* border border-danger\n* border border-danger-subtle\n* border border-warning\n* border border-warning-subtle\n* border border-info\n* border border-info-subtle\n* border border-light\n* border border-light-subtle\n* border border-dark\n* border border-dark-subtle\n* border border-black\n* border border-white\n\n* border border-0\n* border border-top-0\n* border border-end-0\n* border border-bottom-0\n* border border-start-0\n\n* border-opacity-75\n* border-opacity-50\n* border-opacity-25\n* border-opacity-10\n\n* rounded\n* rounded-top\n* rounded-end\n* rounded-bottom\n* rounded-bottom-1\n* rounded-start\n* rounded-start-2\n* rounded-0\n* rounded-1\n* rounded-2\n* rounded-3\n* rounded-4\n* rounded-5\n* rounded-circle\n* rounded-end-circle\n* rounded-pill\n* rounded-start-pill\n\n\n### Sombras\n\n* shadow-none\n* shadow-sm\n* shadow\n* shadow-lg\n\n\n### Tamaño (width y height)\n\n\n* w-25\n* w-50\n* w-75\n* w-100\n* w-auto\n* mw-100\n* min-vw-100\n* vw-100\n\n* h-25\n* h-50\n* h-75\n* h-100\n* h-auto\n* mh-100\n* min-vh-100\n* vh-100\n\n### Espaciado (padding y margin)\n\n* {property}{sides}-{size}\n\ndonde: \n\n* property: m, p\n* sides: t, b, s, e, x, y\n* size: 0, 1, 2, 3, 4, 5, auto\n\n* mt-2\n* mb-2\n\n### Visibilidad\n\n* visible\n* invisible\n* visually-hidden (oculta elementos pero los deja accesibles para tecnologías asistivas como screen readers)\n\n\n## Flexbox y Grid\n\n### Breakpoints\n\nAplican en diferentes clases de utilidad\n\n* xs: 0,\n* sm: 576px,\n* md: 768px,\n* lg: 992px,\n* xl: 1200px,\n* xxl: 1400px\n\nDiferencia con Tailwind CSS:\n\n* sm\n* md\n* lg\n* xl\n* 2xl\n\n\n### Flexbox\n\nPermite anilear elementos en un mismo eje sin entrar a trabajar con filas y columnas bidimensionales, es decir trabajamos en una dimensión.\n\nd viene de display\n\n* d-flex\n* d-inline-flex\n\n\nDiferencia con Tailwind:\n* Tailwind CSS: flex\n* Bootstrap CSS: d-flex\n\n* d-{breakpoint}-flex\n* d-{breakpoint}-inline-flex\n\n* d-flex flex-row\n* d-flex flex-row-reverse\n* d-flex flex-column\n* d-flex flex-column-reverse\n\nDiferencia con Tailwind CSS:\n\n* Tailwind CSS: flex-row, flex-col\n* Bootstrap CSS: flex-row, flex-column\n\n* d-flex justify-content-start\n* d-flex justify-content-end\n* d-flex justify-content-center\n* d-flex justify-content-between\n* d-flex justify-content-around\n* d-flex justify-content-evenly\n\n* d-flex align-items-start\n* d-flex align-items-end\n* d-flex align-items-center\n* d-flex align-items-baseline\n* d-flex align-items-stretch\n\n* align-self-start\n* align-self-end\n* align-self-center\n* align-self-baseline\n* align-self-stretch\n\n* flex-fill\n\n* flex-grow-1\n* flex-shrink-1\n\n* Stacks: son shorthand helpers que usan flexbox por debajo y ayudan a estructurar layouts rápidamente.\n    * vstack\n    * hstack\n\n```html\n\u003cdiv class=\"vstack gap-2 col-md-5 mx-auto\"\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003eSave changes\u003c/button\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-outline-secondary\"\u003eCancel\u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Grid\n\n#### Grid nativo de Bootstrap (12col)\n\n* container (es el que se usa normalmente)\n* container-sm\n* container-md\n* container-lg\n* container-xl\n* container-xxl\n* container-fluid\n\nDentro de un container:\n\n* row\n* col\n\n```html\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col\"\u003e\n                Contenido en columna 1\n        \u003c/div\u003e\n        \u003cdiv class=\"col\"\u003e\n                Contenido en columna 2\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nPor defecto bootstrap considera el grid con 12 columnas virtuales.\n\nSi no indicamos un ancho, se toma automáticamente de forma equitativa, por ejemplo estas dos columnas ocupan 6 cada una:\n\n```html\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"col\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nOcuparían ancho 4 cada una:\n\n```html\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"col\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"col\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nTeniendo en cuenta los breakpoints para responsive:\n\n* Bootstrap: col-{breakpoint}-{1/12}\n* Tailwind: grid grid-cols-1 md:grid-cols-3\n\nEjemplo tailwind: \n\n```html\n\u003cdiv class=\"grid grid-cols-4 gap-4\"\u003e\n  \u003cdiv\u003e01\u003c/div\u003e\n  \u003c!-- ... --\u003e\n  \u003cdiv\u003e09\u003c/div\u003e\n\u003c/div\u003e\n```\n\nOpción similar a tailwind pero con el grid nativo de bootstrap:\n\n```html\n\u003cdiv class=\"container text-center\"\u003e\n  \u003cdiv class=\"row row-cols-1 row-cols-md-3\"\u003e\n    \u003cdiv class=\"col\"\u003eColumn\u003c/div\u003e\n    \u003cdiv class=\"col\"\u003eColumn\u003c/div\u003e\n    \u003cdiv class=\"col\"\u003eColumn\u003c/div\u003e\n    \u003cdiv class=\"col\"\u003eColumn\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nIdóneo para cuando estamos agregando divs desde un bucle for y no queremos preocuparnos de cuando abrir y cerrar rows y de diferenciar cada item columna con una clase columna diferente.\n\nEsto se usa habitualmente para crear:\n\n* dashboard de administración\n* página de inicio que muestra diferentes progresos\n* grid de productos, ecommerce\n* grid de features, beneficios, ventajas\n* sección de equipo\n* footer\n* menú de una navbar (Flyout Menus en tailwind)\n\nEste grid es nativo de bootstrap y se creó antes de que se integrara CSS Grid.\n\n#### CSS Grid (desactivado por defecto)\n\nDesde v5.1 de Bootstrap, desactivado por defecto.\n\nhttps://getbootstrap.com/docs/5.3/layout/css-grid/\n\n```html\n\u003cdiv class=\"grid text-center\"\u003e\n  \u003cdiv class=\"g-col-6\"\u003e.g-col-6\u003c/div\u003e\n  \u003cdiv class=\"g-col-6\"\u003e.g-col-6\u003c/div\u003e\n\u003c/div\u003e\n```\n\nMás similar a tailwind, pero con la filosofía de bootstrap.\n\n\n## Componentes\n\n### Componentes básicos\n\n* Button: botones para desencadenar acciones o enviar formulario o navegar entre páginas.\n\n* Button Group: agrupar acciones relacionadas en una sola línea, útil para agrupar acciones masivas.\n\n* Badge: mostrar contadores, estados.\n\n* Tables: mostrar datos tabulares especialmente para la parte de administración, se suelen combinar con botones, \n\n* Cards: contenedores flexibles para items, card de producto,\n\n* Images: img-fluid\n\n* Listas: List Groups, list-unstyled, list-inline, contenido relacionado o items de una lista de datos que viene de backend\n\n### Componentes de navegación\n\n* Navs \u0026 tabs: menús de navegación horizontal o vertical, pestañas que se seleccionan y cambian un contenido\n* Navbar: barra de navegación responsive y con menú hamburguesa, distintos colores\n* Dropdowns: menús desplegables para agrupar opciones\n* Breadcrumb: facilitar la navegación entre mucho contenido agrupado por categorías\n* Pagination: botones para pasar de una página a otra, el contenido vendría paginado desde backend (LIMIT, OFFSET, TOP)\n* Scrollspy: actualiza menús en base a la posición del scroll\n\nCONSEJO: \n\nSi queremos posicionar urls se recomienda que tengan slugs claros:\n\n\nBásico:\n\n* localhost:8080/tutoriales/4\n* localhost:8080/tutoriales/33efee79-6a0f-4e5d-be35-c1be3a656477\n\nSEO friendly:\n\n* empresa.com/tutorial-java-oop-polimorfismo-y-herencia\n* empresa.com/java/tutorial/oop-polimorfismo-y-herencia\n\n### Componentes de notificación y feedback\n\n* Alerts: mostrar mensajes informativos usando código de color verde éxito, amarillo warning, rojo peligro.\n\n* Toasts: mensajes emergentes temporales no interrumpen la experiencia.\n\n* Close button: botón de cierre con una cruz\n\n* Spinners: indica progreso de carga o acción, con una animación\n\n* Progress: barra de progreso con porcentaje, stripped, animada\n\n* Placeholders: también conocidos como skeleton, representación visual del contenido mientras se termina de cargar.\n\n* Tooltips: información adicional cuando se hace hover sobre un elemento.\n\n* Popovers: es como el tooltip pero más grande y con más contenido, para información contextual más amplia.\n\n* Modal: Crear ventanas que permitan al usuario ver contenido e interactual, por ejemplo login, ofertas, cuando quieres borrar un item o hacer una acción que modifica algo mostramos un modal de confirmación.\n\n### Componentes de contenido dinámico\n\n* Collapse: mostrar y ocultar contenido de forma expandible, FAQs preguntas y respuestas.\n\n* Accordion: paneles colapsables agrupados donde puede estar abierto uno o varios a la vez.\n\n* Offcanvas:  panel lateral oculto se revela al ejecutar una acción o clic para mostrar información adicional.\n\n* Carousel: contenido deslizable como imágenes. CUIDADO: si las imágenes tienen distinta resolución de alto, producirá layout shift moviendo contenido, lo cuál puede quedar mal.\n\n\n## Modo oscuro\n\nDesde la versión v5.3.\n\nEn Bootstrap 5.3, el dark mode se implementa utilizando el atributo ``data-bs-theme`` que puede aplicarse al elemento ``\u003chtml\u003e`` para un cambio global, o a componentes específicos para cambios localizados. Por ejemplo:\n\n``\u003chtml lang=\"en\" data-bs-theme=\"dark\"\u003e``\n\nBootstrap automáticamente aplica los estilos oscuros a todos los componentes dentro de ese contenedor sin necesidad de añadir clases adicionales ni prefijos ``dark:`` como en tailwind.\n\nTambién es posible crear temas personalizados por ejemplo para B2B: \n\nhttps://getbootstrap.com/docs/5.3/customize/color-modes/#adding-theme-colors\n\n\n## Formularios\n\n### **Overview**\n* **`.form-label`** - Etiquetas de formulario con márgenes apropiados\n* **`.form-text`** - Texto de ayuda pequeño y atenuado \n* **`.visually-hidden`** - Oculta visualmente manteniendo accesibilidad\n* **`disabled`** - Deshabilita elementos | **`fieldset[disabled]`** - Deshabilita grupo completo\n\n### **Form control**\n* **`.form-control`** - Input base (text, email, password, textarea, file)\n* **`.form-control-plaintext`** - Input readonly con apariencia de texto\n* **`.form-control-lg`** - Input grande | **`.form-control-sm`** - Input pequeño\n* **`.form-control-color`** - Input de color con estilos especiales\n\n### **Select**\n* **`.form-select`** - Select personalizado\n* **`.form-select-lg`** - Select grande | **`.form-select-sm`** - Select pequeño\n* **`multiple`** - Selección múltiple | **`size=\"n\"`** - Opciones visibles\n\n### **Checks \u0026 radios**\n* **`.form-check`** - Contenedor | **`.form-check-input`** - Input | **`.form-check-label`** - Etiqueta\n* **`.form-check-inline`** - En línea horizontal\n* **`.form-switch`** - Checkbox como toggle switch\n* **`.btn-check`** - Checkbox/radio con apariencia de botón\n\n### **Range**\n* **`.form-range`** - Range personalizado\n* **`min/max/step`** - Atributos de configuración\n\n### **Input group**\n* **`.input-group`** - Contenedor | **`.input-group-text`** - Texto/icono anexo\n* **`.input-group-sm`** - Pequeño | **`.input-group-lg`** - Grande\n* **`.form-check-input.mt-0`** - Checkbox/radio en grupo\n\n### **Floating labels**\n* **`.form-floating`** - Contenedor para etiquetas flotantes\n* Requiere `placeholder` en input e input antes que label\n\n### **Layout**\n* **`.mb-3`** - Espaciado entre campos\n* **`.row`** + **`.col-*`** - Layout con grid\n* **`.col-form-label`** - Etiqueta alineada en layout horizontal\n* **`.g-*`** - Espaciado grid | **`.align-items-center`** - Alineación vertical\n\n### **Validation**\n* **`.needs-validation`** - Validación JS | **`.was-validated`** - Validación automática\n* **`.is-valid`** - Campo válido | **`.is-invalid`** - Campo inválido\n* **`.valid-feedback`** - Mensaje éxito | **`.invalid-feedback`** - Mensaje error\n* **`.valid-tooltip`** - Tooltip éxito | **`.invalid-tooltip`** - Tooltip error\n* **`novalidate`** - Desactiva validación nativa | **`required`** - Campo obligatorio\n\nComo extra, que no ofrece bootstrap está el concepto editor enriquecido o editor WYSIWYG:\n\n* CKEditor: https://ckeditor.com/ckeditor-5/demo/\n* TinyMCE: https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/\n\nCasos de uso:\n\n* login y registro\n* buscador \n* campo correo newsletter\n* Administración: Crear y editar entidades-modelos\n* Formulario de review u opinión en un producto o servicio\n* Formulario publicar un post en una red social\n\nSeguridad: son críticos ya que envían datos a backend y se almacenan en base de datos. Posible entrada para SQLInjection, fuente de errores si no tienes bien las validaciones a nivel de frontend como de backend. A la hora de insertar en base de datos normalmente los ORM o la capa de persistencia debería sanitizar esa entrada usar sentencias parametrizadas para evitar que se rompa el SQL al ejecutarlo en base de datos.\n\n* Formularios avanzados: se suele combinar varios tipos de input (checkbox, buscador, selector) para hacer componentes avanzados que permitan buscar y seleccionar: \n\nhttps://primeng.org/multiselect\n\n\nBootstrap nos proporciona clases básicas para los inputs, textarea, select, checkbox, radio.\n\nCUIDADO: hay que tener en cuenta las asociaciones entre entidades: many-to-one select simple, many-to-many select multiple, one-to-one select simple.\n\nComentarios en Producto (many-to-one).\nProducto y Categoría(many-to-one).\n\n## Boostrap icons\n\nSimilar Font Awesome.\n\nhttps://icons.getbootstrap.com/\n\nAlternativa:\n\nhttps://fontawesome.com/\n\n## Personalización\n\nRequisitos: tener node instalado.\n\ncd customization\n\nnpm install bootstrap\n\nnpm install -g sass\n\nsass --version\n\nsass custom.scss custom.css\n\nsass --watch scss/custom.scss:css/custom.css\n\nVer más: https://getbootstrap.com/docs/5.3/customize/sass/#including\n\n\n## Grid de productos\n\nVer ejemplo\n\n## Dashboard\n\nVer ejemplo\n\n## Extra\n\nQue es la Gestalt | Principios de percepción visual\n\nhttps://www.youtube.com/watch?v=oW6dwEZIf3g\n\n\n## Integración con frameworks:\n\n* Angular: se suele usar NgBootstrap en forma de componentes de Angular.\n    * NgBootstrap: usa Bootstrap CSS https://ng-bootstrap.github.io/\n    * PrimeNG: que está basado en Tailwind CSS\n    * Angular Material: que está basado en Material Design\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcertidevs%2Fcurso-2025-05-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcertidevs%2Fcurso-2025-05-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcertidevs%2Fcurso-2025-05-bootstrap/lists"}