Add a container, row and column with one click

Since the container / row / column triumvirate is the main building structure in BS, why not have an option in the elements and blocks modal that lets you select a container, row and one column with a single click? It would save a total of 4 clicks (I counted them). Over a lifetime, that’s a lot of saved clicks.

Hi. I have converted this into a feature request.
You can vote for your own post as well.

This does make sense, and might be useful.
There are something called blocks, but they cannot be used inside other components. So having this option could help with reducing a few click.

1 Like

Thanks sid. I must have forgotten to change the category it was to go in. Cheers.
Yeah. ‘Save The Clicks’ !!!

I’ve had the same thoughts!
And since we’re at it, maybe there could be a row/column block too.

1 Like

I don’t think the row / column block would be work, Fred. It would break the BS alignment.

The container has padding so it can be used to contain any content and all of them will align nicely. Rows are special containers designed for columns only. Rows have negative margins so that the column gutters on the ends will align with the other content.

If you were to put the rows / columns inside a section, div or something else, then it would be out of alignment unless you added 15px padding to the left and right of the containing div and if you’re going to do that, you might as well use a container.

In other words, all three (container / row / columns) are designed to work together.

You can use rows as a direct child of <body> or <section>, by using the g-0 class to avoid these problems.

<section>
    <div class="row g-0">
    </div>
</section>
2 Likes

Another possibility:

2 Likes

It’s good to know you can do that Teodor, but I still think it defeats the purpose of making things easier. If there was a demand for the row / column pair (without the container), then Wappler might be able to auto add something like g-0 to the row / column block, but I think that’s getting too messy – particularly since I can’t see it being used that much.

That looks promising, ben. BS CSS Grid and vanilla CSS Nested Grids will be game changers. We’re getting close to having layout tools as good as HTML tables :grinning:

1 Like

Nice trick from Teo.

What I meant was that since we always use containers, they are a given on a page. The container-row-column element would be great as the first building block of a new page.
As I keep building the page, I am constantly faced with the obligation to go get a row then a column when I want to add more content / elements to that original container. So inside my container with already a row-column in it, I may want to add more row-column blocks quick in a single click. Just an additional shortcut, you know.

1 Like

Exactly my thoughts :grinning:

1 Like

Oh, I see what you mean, Fred. You mean adding additional rows/columns inside a single container. That makes more sense but people will have to be aware they can only add it to a container – unless they want to add hacks.

I’m a rookie user of bootstrap. As far as I can understand from the tutorials, the typical structure of a page is Container-Row-Column.
So once I add my first C-R-C block I’m left with the option to use the R-C combo in order to add more content inside that container (unless the row suffices).
Therefore I see 2 useful shortcuts: C-R-C block and R-C block.
Indeed that R-C block would not even appear as an option in the App Connect picker if it’s not for a container, just like any other elements that appear only if they are valid selections as a child of (or before/after) the active element.

Anyway, I’d be happy with a Container/Row/Column block. When I want an additional Row/Column pair, I just select the previous row and hit duplicate but you put up a good argument :grinning: We’ll see what Santa brings.

1 Like

Correct, one can duplicate the row, …provided that row (R-C) is empty.