Flexible layouts are handy, but I can not somehow find how do I configure bootstrap classes properly for them.

Example:

I have a row with 2 columns (regions), each has col-md-6 class (50 percent width), which is fine, but on mobile devices / smartphones I am unable to set it to have col-xs-12 for example, if I want for columns to be under each other full width.

Currently only solution is probably rewriting bootstrap classes in theme by hand, like setting media query to max-width 768 or so and place all the bootstrap classes with with: 100%, which seems to be overkill when bootstrap itself has a way of doing this.

Maybe I am just missing something?

Also my previous thread / issue with setting custom classes for regions should probably solve this issue, but it would be wise to have it somewhere where regions are created / configured for flexible layouts.

Thanks in advance for any advices! Community for backdrop rocks!

Comments

indigoxela's picture

Hi lubwn,

on mobile devices / smartphones I am unable to set it to have col-xs-12

I'm not sure if I get your intention. The CSS classes shouldn't change, the style (based on @media rules) changes.

An example:

.myclass {

  padding: 10px;

}

@media screen and (min-width: 968px) {

  .myclass {

    float: left;

    width: 50%;

  }

}

So on wider screens the items with CSS class "myclass" get placed side by side, on smaller screens they are below each other. The CSS classes themselves do not change, of course.

No, I mean, it has nothing to do with custom classes. When you are creating a flexible layout you are placing regions next to each other via UI of Backdrop. And it automatically adds col-md-6 or so to those regions, depending on their layout. But there is no way to alter this or add more bootstrap classes to markup, because right now you can not add classes to regions at all. It would still be handy to make this sorted out via UI.

I agree this would be handy to do in the UI when editing a flexible template.

If you need something sooner you can still create an actual *.tpl.php file and add the classes there.

By the way, you shouldn't need to specify "col-xs-12" since by default a region would be full width on small screens.

lubwn, would you be interested in posting feedback on this issue? https://github.com/backdrop/backdrop-issues/issues/5032. You'll need a GitHub account, but if you would prefer you can post it here and I'll update the issue in GitHub. We've got a proof of concept for adding custom classes but would like to know use cases.