{"id":26373292,"url":"https://github.com/maxisandoval37/bootstrap-components-code-snippet","last_synced_at":"2025-03-17T01:27:57.628Z","repository":{"id":111889531,"uuid":"591512621","full_name":"maxisandoval37/Bootstrap-Components-Code-Snippet","owner":"maxisandoval37","description":"https://maxisandoval37.github.io/Bootstrap-Components-Code-Snippet/Index.html","archived":false,"fork":false,"pushed_at":"2024-11-08T19:15:07.000Z","size":1782,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-08T19:37:06.490Z","etag":null,"topics":["bootstrap","grid"],"latest_commit_sha":null,"homepage":"https://maxisandoval37.github.io/Bootstrap-Components-Code-Snippet/Index.html","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/maxisandoval37.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}},"created_at":"2023-01-21T00:02:25.000Z","updated_at":"2024-11-08T19:15:12.000Z","dependencies_parsed_at":"2024-11-08T19:29:38.937Z","dependency_job_id":"9b00e40a-6a53-40be-bafb-83d891ffcf30","html_url":"https://github.com/maxisandoval37/Bootstrap-Components-Code-Snippet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxisandoval37%2FBootstrap-Components-Code-Snippet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxisandoval37%2FBootstrap-Components-Code-Snippet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxisandoval37%2FBootstrap-Components-Code-Snippet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxisandoval37%2FBootstrap-Components-Code-Snippet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxisandoval37","download_url":"https://codeload.github.com/maxisandoval37/Bootstrap-Components-Code-Snippet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243957047,"owners_count":20374601,"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","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":["bootstrap","grid"],"created_at":"2025-03-17T01:27:57.157Z","updated_at":"2025-03-17T01:27:57.622Z","avatar_url":"https://github.com/maxisandoval37.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eBootstrap 5 Components Code Snippet\u003c/h1\u003e\n\n\u003ch2\u003e\n  \u003ca href=\"https://maxisandoval37.github.io/Bootstrap-Components-Code-Snippet/Index.html\"\u003eLive demo\u003c/a\u003e\n\u003c/h2\u003e\n\n\u003ch1 align=\"center\"\u003eNotas\u003c/h1\u003e\n\n\u003ch3\u003e\n  \u003ca href=\"https://getbootstrap.com/docs/5.0/layout/containers/\"\u003eContenedores:\u003c/a\u003e\n\u003c/h3\u003e\n\u003cul\u003e\n \u003cli\u003econtainer: predeterminado\u003c/li\u003e\n \u003cli\u003econtainer-fluid: menos márgenes\u003c/li\u003e\n \u003cli\u003econtainer-{breakpoint}: ancho 100% hasta llegar al breakpoint\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3\u003e\n  \u003ca href=\"https://getbootstrap.com/docs/5.0/utilities/float/\"\u003eFloat:\u003c/a\u003e\n\u003c/h3\u003e\nÚtiles para alinear elementos hacia la izquierda o hacia la derecha.\n\u003cul\u003e\n \u003cli\u003efloat-start\u003c/li\u003e\n \u003cli\u003efloat-end\u003c/li\u003e\n \u003cli\u003efloat-none\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3\u003eGrid:\u003c/h3\u003e\n\u003cul\u003e\n \u003cli\u003eEl máximo de columnas que tenemos disponibles son 12.\u003c/li\u003e\n \u003cli\u003ePodemos distribuir este espacio en los tamaños de las columnas. Ej: col-6 | col-6 (ocuparían la mitad de la pantalla).\u003c/li\u003e\n\u003c/ul\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/68869989/216829993-6c501054-90d2-4e0b-bca0-09a91a6a1ac1.png\" alt=\"grid-1\"\u003e\n\n\u003ch3\u003eColumnas:\u003c/h3\u003e\n• Alineación:\n\u003cul\u003e\n \u003cli\u003ecol align-self-start\u003c/li\u003e\n \u003cli\u003ecol align-self-center\u003c/li\u003e\n \u003cli\u003ecol align-self-end\u003c/li\u003e\n\u003c/ul\u003e\n• Espacios (offset): Permite saltear espacio de columnas. Ej: si quiero saltear una columna:\n\u003cul\u003e\n \u003cli\u003ecol-4 offset-1\u003c/li\u003e\n\u003c/ul\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/68869989/216830193-c22a6060-4065-410d-b126-e0a5911a2e9c.png\" alt=\"columns-1\"\u003e\n\u003cul\u003e\n \u003cli\u003ecol-4 \u003cb\u003ems-auto\u003c/b\u003e //coloca automáticamente las columnas hacia los extremos, sin dejar espacios.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3\u003eGutters:\u003c/h3\u003e\nPermite insertar \u003cb\u003eespacios\u003c/b\u003e más específicos (de forma vertical u horizontal). Permite valores desde el 0 (sin espacio) hasta el 5 (máx.).\n\u003cul\u003e\n \u003cli\u003egx-1 //horizontal\u003c/li\u003e\n \u003cli\u003egx-1 //vertical\u003c/li\u003e\n \u003cli\u003eg-1 //ambos\u003c/li\u003e\n\u003c/ul\u003e\nPodemos especificar según el tipo de pantalla:\n\u003cul\u003e\n \u003cli\u003egx-sm-0 gx-md-3 gx-lg-5\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3\u003eEspacios / Tamaños:\u003c/h3\u003e\n•\tp-3 //padding de 3, en todas las direcciones (max. 5)\n\u003cbr\u003e\n•\tm-3 //margin de 3, en todas las direcciones (max. 5)\n\u003cul\u003e\n \u003cli\u003emt-3 //margin top\u003c/li\u003e\n \u003cli\u003emb-3 //margin bottom\u003c/li\u003e\n \u003cli\u003emy-3 //margen hacia arriba y hacia abajo\u003c/li\u003e\n \u003cli\u003ems-3 //margin start (left)\u003c/li\u003e\n \u003cli\u003eme-3 //margin end (right)\u003c/li\u003e\n \u003cli\u003emx-3 //margen hacia los laterales\u003c/li\u003e\n\u003c/ul\u003e\n• Ancho:\n\u003cul\u003e\n \u003cli\u003ew-25 //El elemento se ajusta al 25% de ancho del contenedor\u003c/li\u003e\n \u003cli\u003ew-auto //Se ajusta al tamaño del elemento actual\u003c/li\u003e\n\u003c/ul\u003e\n• Alto:\n\u003cul\u003e\n \u003cli\u003eh-25 //El elemento se ajusta al 25% de alto del contenedor\u003c/li\u003e\n \u003cli\u003eh-auto //Se ajusta al tamaño del elemento actual\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3\u003e\n  \u003ca href=\"https://getbootstrap.com/docs/5.0/utilities/flex/\"\u003eAlineación:\u003c/a\u003e\n\u003c/h3\u003e\n\u003cul\u003e\n \u003cli\u003ejustify-content-center\u003c/li\u003e\n \u003cli\u003ejustify-content-start\u003c/li\u003e\n \u003cli\u003ejustify-content-end\u003c/li\u003e\n \u003cli\u003e...\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3\u003e\n  \u003ca href=\"https://getbootstrap.com/docs/5.0/components/badge/\"\u003eBadge:\u003c/a\u003e\n\u003c/h3\u003e\nÚtiles para contener elementos aplicando estilos.\n\u003cimg src=\"https://user-images.githubusercontent.com/68869989/216830958-f3971a94-d46a-4dd5-8b80-9ff6302a537a.png\" alt=\"badge-1\"\u003e\n\n\u003ch3\u003eTextos:\u003c/h3\u003e\n• Tamaños:\n\u003cul\u003e\n \u003cli\u003e.fs-1\u003c/li\u003e\n \u003cli\u003e...\u003c/li\u003e\n \u003cli\u003e.fs-6\u003c/li\u003e\n\u003c/ul\u003e\n• Quitar estilos (útil por ejemplo para los enlaces):\n\u003cul\u003e\n \u003cli\u003etext-decoration-none\u003c/li\u003e\n\u003c/ul\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxisandoval37%2Fbootstrap-components-code-snippet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxisandoval37%2Fbootstrap-components-code-snippet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxisandoval37%2Fbootstrap-components-code-snippet/lists"}