Specify column size on a parent element (or on a template row)

[bjornte]

For context and a HTML example, see this post on Stack Overflow.

Normally you specify the column size of the <div> on the element itself.

But e.g. when building a form with multiple rows of similarly styled attribute-value pairs, it would be beneficial to specify this on a parent element, so that you don't have to repeat the exact same styling on multiple rows of elements. Another way to achieve the same effect would be to use the first row as a template, and to apply this style to subsequent rows.

On my current layout, I have 11 attribute-value pairs, so I would save 20 ((11-1)*2) classes if I could specify this on a parent or template element. This would improve brevity (and, in my opinion, legibility) and reduce room for errors.

Has this been proposed for Bootstrap 4 (or previous versions)? I assume this must have been raised by other people than myself, but I haven't found any threads. I guess I'm missing the correct keyword or term. Sorry if this is a duplicate.

[cvrebert]

so that you don't have to repeat the exact same styling on multiple rows of elements

Well, if you're using templates, you only have to write the column layout once and then merely invoke it when rendering each row. Of course, that doesn't affect the verbosity of the final output HTML at all.

---

As far as a CSS approach, the problem I see is that quite a lot of CSS would be required to cover all the possible combinations of # of columns and widths of columns. And it would seem to require a bunch of :nth-child selectors, which increases CSS specificity, which we're generally trying to avoid in Bootstrap 4.

FWIW, your scenario is fairly straightforward to accomplish by adding a little custom Sass (for the exact layouts your project needs) that utilizes Bootstrap's grid mixins.

Another way to achieve the same effect would be to use the first row as a template, and to apply this style to subsequent rows.

It's probably possible to implement something like that using display: table; and table-layout: fixed;, or Flexbox. Could be interesting! Your form use-case seems pretty common.

[mdo]

Thanks, but we won't be doing anything to tackle this in Bootstrap.