Fixes #8804 - Align the dashboard to bootstrap columns

This is a mix-and-match approach.
The data-col is responsible for the start point of the widget, and the sizex is responsible for the widget width, so if you want for example a widget that is located on the third column and is 5 columns wide, you will mark it with `data-col=3 data-sizex=5`. Each of the properties is responsible for a different property of the element: data-col is about margins (offset), data-sizex is about width, so you can't put them in the same selector like you've shown.
The only thing that I am not sure about, is moving both elements to a single loop. I don't think it is a better, because it will cause a less nicer CSS in the output that is more confusing:
```css
[data-col=1] {
margin: ...
}
[data-sizex=1] {
width: ...
}
[data-col=2] {
margin: ...
}
[data-sizex=2] {
width: ...
}
```