Bootstrap row & Cols use percentage


#1

I have an app where I have a bootstrap row with 2 columns.
In each column I have a container that has a datatable inside.
This works great on different screen sizes as I can make the right column move down on a smaller screen using ‘size.xs’.

As usual here’s the tricky bit…

I need to have the left col 20% width & the right one 80% width ( customer details on the left Invoices on the right) So I need more real estate on the right.

If I set % in the columns it works fine except the the ‘size.xs’ fails.

Is there a way to get this working ?

Cheers

Steve Warby


#2

All BS column widths are essentially percentages so hacking BS’s intended column width isn’t too much work. Create a class in Project CSS to override Bootstraps’s own CSS (Project CSS is read in last on deploy so takes precedent).

@media (min-width: 768px) {
  .col-sm-20p {
    width: 20%;
  }
  .col-sm-80p {
    width: 80%;
  }
}

Next, add col-sm-20p to the first column Class property in the IDE, and add col-sm-80p to the Class property of the other column.

The result should be standard BS behavior in the xs range, and 20%/80% widths in the sm and larger ranges. It also leaves intact standard BS behavior for any column not having this class assigned to it.

This solution works with Bootstrap 3 as used in AppStudio, not the newer version out there.

Kind regards,
Doug


#3

Thanks Doug,

thats working as expected. + I now some more ‘wizardry’

Cheers

Steve Warby