Howto get bootstrap grid row or grid container width in pixels by javascript

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

To get the width of the grid or row, or any element really, in pixels, you can do the following:

const pixels = document.querySelector('.grid').clientWidth;