Howto get bootstrap grid row or grid container width in pixels by javascript.
I'm using aurelia for javascript but the code can be in standard js (please no jquery).
I tried to find this on the bootstrap website but I'm still confused because there are several dimensions for width: col-xs, colmd... but in fact, we are just using 4 dimensions: col-3, col-6, col-9, col-12, and nothing more, so basically I need to get that full width in order to translate pixels to col-x again to match resizing from an HTML element.
get your element using document.querySelectorAll("your html query")[0].offsetWidth.
this command will return the element width in pixels including padding.
I've made an example in jsFiddle:
https://jsfiddle.net/dgf0okrj/
document.querySelectorAll("your html query")[0].offsetWidth
just open your console and run it.
You can update the width and max-width of bootstrap row or container or column in css:
.row{
max-width: 200px !important;
width: 200px !important;
}
Alternatively you can also use % to update the width but remember to always update the max-width in your css.