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.

CodePudding user response：

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.

CodePudding user response：

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.