Responsive columns with half, or partial, width?

Bootstrap Studio Help
1

Hi forum,

Using this example in BSS XL size format, is there a way to make a column, say…1/2 (or 50%) of the default Col-XL-1 size?

https://restless-hall-6422.bss.design/

I tried setting the Col width to 50% in the Layout in Appearance tab, but of course that makes the Col expand to 50% of the entire container size.

The reason for this is wanting some of the other Col’s to be able to be bigger.

In this example, maybe the first and third Col’s could be Col-XL-1/2 and then the second column could be Col-XL-3 instead.

Is this possible?

2

You could (in theory) use the following css:

@media (min-width: 1200px) {
  .col-xl-half {
    flex: 0 0 auto;
    width: 4.166666665%;
  }
}
1 Like
3

Yeah, that works! At least, in the limited testing done at this point.

So, for designing the same with LG size (for example), it would be this?

@media (min-width: 992px) {
.col-lg-half {
flex: 0 0 auto;
width: 4.166666665%;
}
}

With the width percentage in these cases coming from a “single” Col: 1/12*50% correct?

And in theory, as you noted, this should keep the responsiveness in place.