El nuevo motor responsivo de Bubble cambia la forma de diseñar páginas, y dominar Flexbox y los contenedores es el primer paso para construir interfaces que se adapten a cualquier pantalla. Aquí aprenderás a estructurar tu página, alinear elementos y entender cómo funciona el layout en column y row, pensado para quienes empiezan a construir aplicaciones no-code.

¿Qué son los contenedores en Bubble y para qué sirven?

Los contenedores son los elementos básicos que dan estructura a una página de Bubble. Como su nombre lo indica, contienen otros elementos y te ayudan a construir el wireframe sobre el que apoyarás todo lo demás.

Para verlos, ve al menú izquierdo en tu página, asegúrate de tener seleccionado Design y abre el desplegable Containers, que aparece justo entre el canvas y el menú. Ahí encontrarás los bloques que usarás para armar tu interfaz.

En la lista vas a ver varios tipos:

• Group: el contenedor más común, ideal para agrupar elementos.
• Repeating group: para mostrar listas dinámicas, lo usarás en la aplicación que construirás.
• Popup: similar a un grupo, pero se posiciona encima del contenido de la página.
• Floating group y Group focus: para elementos que se mantienen fijos o anclados.

¿La página también es un contenedor? Sí. Aunque no aparezca en la lista, la página es el contenedor más grande de Bubble y define cómo se comportan todos los elementos dentro de ella.

¿Cuál es la diferencia entre el layout fixed y el responsivo?

Antes de Flexbox, Bubble trabajaba con un layout fixed, donde tú decidías la posición exacta de cada elemento arrastrándolo al canvas. Si seleccionas la página, presionas Edit y cambias el container layout a fixed, verás ese comportamiento clásico: arrastras un grupo y se queda exactamente donde lo soltaste [01:50].

El problema es que ese formato no se adapta bien a distintas pantallas. Por eso vamos a usar column o row, que son los formatos del nuevo motor responsivo basado en Flexbox.

Para visualizar un grupo sin color, abre el árbol de elementos en el menú izquierdo y desmarca only show hideable. Así verás todos los grupos que has creado, incluso los que no tienen estilo aplicado.

¿Cómo funciona el formato column?

En el formato column, todos los elementos que arrastres al canvas se apilan uno debajo del otro automáticamente. Para hacerlo más visual, asigna estilos distintos a cada grupo desde la pestaña Appearance, en la sección Style:

• Grupo A con estilo group tips.
• Grupo B con estilo group warning (rojo).
• Grupo C con estilo inner group.

Cada grupo recibe un nombre alfabético en orden ascendente y se coloca debajo del anterior sin que tengas que posicionarlo manualmente.

¿Cómo funciona el formato row?

Si cambias el layout de la página a row, Bubble reorganiza los elementos de izquierda a derecha. La gran ventaja del nuevo motor es que ves el efecto en tiempo real sobre el canvas, sin necesidad de previsualizar.

¿Cómo alineo los elementos dentro de un contenedor?

Debajo del container layout aparece el container alignment, que define cómo se posicionan los elementos dentro de la fila o columna. En formato row tienes cinco opciones:

• Left: todos los grupos pegados a la izquierda.
• Center: centrados respecto al ancho de la página.
• Right: alineados a la derecha.
• Space around: deja espacio entre los elementos y también en los extremos.
• Space between: distribuye el espacio entre elementos, pero sin margen en los extremos.

La diferencia entre space around y space between es sutil pero importante: en el primero, los grupos de los extremos quedan separados del borde; en el segundo, se pegan a él.

¿Qué hago si uso column y no veo opciones de alineación? Selecciona un grupo individual. En column, las opciones de horizontal alignment aparecen por elemento, no a nivel de página, y te permiten ajustar cada grupo a izquierda, centro o derecha de forma independiente.

¿Cómo cambio el orden de los grupos sin arrastrarlos?

Justo debajo de horizontal alignment tienes un selector con cuatro opciones: make first, previous, next, make last. Sirven para reordenar los grupos sin tener que volver a arrastrarlos.

Por ejemplo, si seleccionas el grupo A y presionas next, intercambia su posición con el grupo B. Si le das make last, salta directamente al final de la lista. Esto también funciona en formato row, no solo en column.

¿Cómo controlo tamaño y márgenes de los elementos?

Debajo de los botones de posición encontrarás dos campos: W (width, ancho) y H (height, alto), ambos en píxeles. Si cambias los valores, el efecto se ve al instante en el canvas.

Después vienen los márgenes, que definen el espacio entre un elemento y los que lo rodean. Puedes ajustar los cuatro lados: superior, inferior, izquierdo y derecho.

¿Para qué sirven los márgenes en Bubble? Definen el espacio que Bubble deja entre un elemento y los demás. Si pones 100 píxeles de margen inferior, el siguiente grupo se separará exactamente esa distancia, y Bubble lo mantendrá al previsualizar la página.

Prueba a cambiar los valores en tu computadora y experimenta con cada propiedad. Mientras más juegues con los layouts, alineaciones y márgenes, más rápido vas a interiorizar la lógica de Flexbox dentro de Bubble. ¿Qué fue lo que más te costó al pasar del fixed al responsivo? Cuéntamelo en los comentarios.