Necesito hacer una grid como la de la imagen y no se que elementos debo utilizar (los colores son solo de ejemplo).
Gracias.
Then make it, that's what the app is for doing. This forum isn't for requesting to have others do work for you unless you are planning to hire them to do it. The forum is for asking for help with the app and how it works.
"I need to make a grid like the image and not is that items should I use (the colors are just example)."
Are you looking to use Flexbox or CSS Grid? The Bootstrap Studio app uses Flexbox by default and has tools to work with it.
For Flexbox, you need to make
1 row with 1 column that spans the whole site
1 row with 2 columns, second column contains 2 rows, first row contains 1 column that spans the whole content, second row contains 20 columns equally spaced and set the row to allow wrapping
1 row with 2 columns, same size as the first 2 colums
¿Busca para utilizar Flexbox o CSS Grid? La aplicación Bootstrap Studio utiliza Flexbox por defecto y tiene herramientas para trabajar con él.Para Flexbox, necesitas hacer 1 fila columna 1 que atraviesa la fila de todo el sitio 1 con 2 columnas, segunda columna contiene las 2 filas, primera fila contiene 1 columna que abarca todo el contenido, segunda fila contiene 20 columnas igualmente espaciados y establecer la fila para permitir la envoltura 1 fila con 2 columnas, mismo tamaño que las 2 primeras columnas
HTML
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-8">
<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-8"></div>
</div>
</div>
You will need to actually figure out the sizing of the columns, but here is what I have as a thought. This does not take into effect how it works responsively. You'll need to make those adjustments in the app in the Options pane. You will need to expand the Column Options - Width section so you can see the media break points, such as SM/MD/LG/XL.
Usted tendrá que averiguar realmente el tamaño de las columnas, pero aquí es lo que tengo como un pensamiento.Esto no tiene en efecto funciona sensiblemente.Usted necesitará hacer los ajustes en la aplicación en el panel de opciones.Usted tendrá que ampliar las opciones de columna - sección de ancho para que pueda ver los puntos de rotura de los medios de comunicación, tales como SM/MD/LG/XL.
I used https://www.translate.com/ to generate English to Spanish
Saj
haha I forgot the 1 column that spans the content of 20 columns, so I relooked at my description too and I'd drop the row that I said for the content section and just make a 21st column and set that 1st column to span the whole content lenght. Something like that following, includes responsiveness as well this time.
jaja me olvidé la 1 columna que abarca el contenido de 20 columnas, así que relooked en mi Descripción demasiado y dejaba la fila que dijo para la sección contenido y sólo hacen un 21 columna y la columna 1 para abarcar la longitud de todo contenida.Algo como lo que sigue, incluye capacidad de respuesta, así esta vez.
It's just a skeleton of the Grid structure, you'd have to actually drag/drop the components and set the col sizes to what you really need and want.
Es apenas un esqueleto de la estructura de la rejilla, tienes realmente arrastrar y colocar los componentes y el col tamaños a lo que realmente necesita y desea.
HTML
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8">
<div class="row">
<div class="col-12"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
<div class="col-md-6 col-lg-4 col-xl-3"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
</div>
Saj