https://github.com/maxisandoval37/bootstrap-components-code-snippet
https://maxisandoval37.github.io/Bootstrap-Components-Code-Snippet/Index.html
https://github.com/maxisandoval37/bootstrap-components-code-snippet
bootstrap grid
Last synced: over 1 year ago
JSON representation
https://maxisandoval37.github.io/Bootstrap-Components-Code-Snippet/Index.html
- Host: GitHub
- URL: https://github.com/maxisandoval37/bootstrap-components-code-snippet
- Owner: maxisandoval37
- Created: 2023-01-21T00:02:25.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-11-08T19:15:07.000Z (over 1 year ago)
- Last Synced: 2024-11-08T19:37:06.490Z (over 1 year ago)
- Topics: bootstrap, grid
- Language: HTML
- Homepage: https://maxisandoval37.github.io/Bootstrap-Components-Code-Snippet/Index.html
- Size: 1.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Bootstrap 5 Components Code Snippet
Live demo
Notas
Contenedores:
- container: predeterminado
- container-fluid: menos márgenes
- container-{breakpoint}: ancho 100% hasta llegar al breakpoint
Float:
Útiles para alinear elementos hacia la izquierda o hacia la derecha.
- float-start
- float-end
- float-none
Grid:
- El máximo de columnas que tenemos disponibles son 12.
- Podemos distribuir este espacio en los tamaños de las columnas. Ej: col-6 | col-6 (ocuparían la mitad de la pantalla).
Columnas:
• Alineación:
- col align-self-start
- col align-self-center
- col align-self-end
• Espacios (offset): Permite saltear espacio de columnas. Ej: si quiero saltear una columna:
- col-4 offset-1
- col-4 ms-auto //coloca automáticamente las columnas hacia los extremos, sin dejar espacios.
Gutters:
Permite insertar espacios más específicos (de forma vertical u horizontal). Permite valores desde el 0 (sin espacio) hasta el 5 (máx.).
- gx-1 //horizontal
- gx-1 //vertical
- g-1 //ambos
Podemos especificar según el tipo de pantalla:
- gx-sm-0 gx-md-3 gx-lg-5
Espacios / Tamaños:
• p-3 //padding de 3, en todas las direcciones (max. 5)
• m-3 //margin de 3, en todas las direcciones (max. 5)
- mt-3 //margin top
- mb-3 //margin bottom
- my-3 //margen hacia arriba y hacia abajo
- ms-3 //margin start (left)
- me-3 //margin end (right)
- mx-3 //margen hacia los laterales
• Ancho:
- w-25 //El elemento se ajusta al 25% de ancho del contenedor
- w-auto //Se ajusta al tamaño del elemento actual
• Alto:
- h-25 //El elemento se ajusta al 25% de alto del contenedor
- h-auto //Se ajusta al tamaño del elemento actual
Alineación:
- justify-content-center
- justify-content-start
- justify-content-end
- ...
Badge:
Útiles para contener elementos aplicando estilos.
Textos:
• Tamaños:
- .fs-1
- ...
- .fs-6
• Quitar estilos (útil por ejemplo para los enlaces):
- text-decoration-none