In APEX 5, using the Universal Theme, I cannot get the bootstrap 2 column div adjustments to work on a mobile phone in portrait using the documentation below :
Column Modifier Classes
You can fine tune the responsive behavior of the components on your page by modifying the Column CSS Classes property of your regions.
| Extra small devicesPhones (<768px) | Small devicesTablets (≥768px) | Medium devicesDesktops (≥992px) | Large devicesDesktops (≥1200px) |
|---|
Class prefix | .col-xs-
| .col-sm-
| .col-md-
| .col-lg-
|
|---|
When I apply the class prefix col-xs-6 to indicate on small devices for columns to take 6 positions out of 12 (portrait or landscape), it does not honor that (break after 2 divs). Seems to actually ignore all attempts at col-xs-[some number]. any number I place there has no affect.
Further to this, when I look at the source code produced by apex, I see this in the div tags: class="col col-2 col-xs-6". I can't seen to get rid of the "col-2", and that code is being generated even though the column span is set to Auto.
I used the Universal Theme demo to see how they created the region container and the sub regions. I noticed even when running the demo app, an iphone portrait cannot see 2 column divs. But if I run a standalone bootstrap html page, I can achieve 2 column divs.
Am I missing something to enable bootstrap styling in apex for multi column divs in portrait?
Thank you,
Erik