# Ejercicios 1 ## Ejercicio 1 - Uso de la rejilla En este ejercicio vamos a practicar con la librería Bootstrap y su sistema de rejilla. Partiremos de la plantilla para una página web básica facilitada en la teoría, le añadiremos un contenedor de tipo `container` e iremos añadiendo filas y columnas intentando imitar el diseño (y colores) del esquema de la siguiente figura: ![](/files/-LwrBQ3XX-Mr9G9JyhvB) En el esquema se diferencia entre dos posibles tamaños de pantalla: tamaños pequeños (xs) y resto de tamaños (a partir del tamaño sm en adelante). Tenéis que aplicar las clases de Bootstrap necesarias para que al cambiar el tamaño de la pantalla se cambie la disposición de los bloques como se muestra en el esquema. ## Ejercicio 2 - Uso avanzado del sistema de rejilla En este ejercicio vamos a seguir practicando con la librería Bootstrap y su sistema de rejilla. Para este ejercicio utilizaremos también la plantilla para una página web básica, le añadiremos un contenedor de tipo `container` e iremos añadiendo filas y columnas intentando imitar el diseño (y colores) del esquema de la siguiente figura: ![](/files/-LwrBQ3ZLDb_eq-20jv4) En este caso diferenciaremos entre tres disposiciones para la misma web, la de la izquierda se refiere a los tamaños grandes (xl y lg) y medianos (md), la disposición central al tamaño pequeño o de *tablets* (sm) y la de la derecha la correspondiente a móviles (xs). Tenéis que aplicar las clases de Bootstrap necesarias para que al cambiar el tamaño de la pantalla se cambie la disposición de los bloques como se muestra en el esquema. Tened en cuenta que para este ejercicio es necesario utilizar el anidamiento de columnas. En la disposición para tamaños grandes, se puede ver como el bloque central de las columnas de color azul tiene un tamaño diferente. Esto se debe a que las 12 posibles columnas del sistema de rejilla de Bootstrap no es divisible por este número de columnas. ¿Cómo podríamos hacer que las cinco columnas tengan el mismo tamaño? --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ajgallego.gitbook.io/bootstrap-4/ejercicios-1.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.