aui:col tag should support Bootstrap 3's grid breakpoint sizes

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.0 M3
• Fix Version/s: 7.0.0 M3
• Component/s: UI Infrastructure
• Labels: None
• Similar Issues: Show 5 results ; ;

  LPS-48100	Remove bootstrap grid classes from form-search
  LPS-34866	Create aui:col taglib
  LPS-50302	Create media-query mixin that uses bootstrap 3 breakpoints
  LPS-1017	Indicate sort direction in the grid header
  LPS-25904	Missing ids for the inputs in the permission grid

Bootstrap 3 has different break point sizes available to it's grid system; col-xs-x, col-sm-x, col-md-x, and col-lg-x.

aui:col uses the grid system but always defaults to col-md-x, it should have the option of specifying the breakpoint size.

[Nate Cavanaugh]

The new updated API, after discussion with Rob, looks something like this:

Specifying widths for each device type

 
<aui:col lg="3" md="4" sm="6">Col 1</aui:col>
<aui:col lg="9" md="8" sm="6">Col 2</aui:col>

Specifying pulls/offsets for different device types

 
<aui:col lg="3,push-9" md="4" sm="6">Col 1</aui:col>
<aui:col lg="9,pull-3" md="8" sm="6,offset-2">Col 2</aui:col>

(Basically, additional options are handled via comma-separated strings).

However, the old API of using width or span is still supported (but are placed on the md- device type). The additional attributes provide granular control.

[Daisy Lin (Inactive)]

I have confirmed with the developer Robert Frampton that the ticket can't be manually tested.