Add support for additional bootstrap grid options (.col and .col-auto)

Created on 12 February 2021, almost 4 years ago

Updated 2 August 2023, over 1 year ago

Currently, we can only define col-1 through col-12 for columns in a 12-grid-system. However, there seems to be no way to have an auto column width via just .col or .col-auto. Would be great to have this option.

Example:
You have a 2 column setup in a 12-grid bootstrap. You want to show the columns in 50%/50% width. You set both columns to .col-6. Everything works fine.
However, if you want to hide the first column if it's empty (e.g. via setting both columns to just .col or via CSS :empty selector), there is no way to make the second column go full-width, because there is no way to set the columns to just ".col" instead of ".col-6".

The patch here adds the functionality to add layout structures like 6 flex (which results in .col-6 and .col) or flex flex (resulting in .col .col) or 3 auto (resulting in .col-3 .col-auto).

For everyone interested: To use the CSS :empty selector from the example above, you will need to adjust your twig.html or apply the patch from #3198106: Allow to hide empty sections via CSS :empty selector → .

✨ Feature request

Status

Needs review

Version

2.0

Component

Code

Created by

🇩🇪Germany extect Germany

Live updates comments and jobs are added and updated live.

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment over 1 year ago →
🇫🇷France yonailo Paris
Great patch !

I have used it to create a 5 columns equal layout of 20% using "flex flex flex flex flex".

Thank you very much, I hope this will be commited !!
Comment about 2 months ago →
🇧🇯Benin delacosta456
hi all
i was looking for a similar functionality in in Varbase using Lb but didn't understand what to exactly after apply this patch together with the mentioned on on issue description.
Can somebody direct me ?
My own scenario is having two column bootstrap set up with the first one() to 75% et the other one to 25%.
Now i want the first column(75%) to auto-width to 100% when there is no content in the second one

Thanks

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024