BOOTSTRAP "row" - GoogleMaps API

[Spunky]

Alright so I am using the Google Maps API. I have a map that I need to be 100% height and width (defined in the CSS). The map does not show unless the container has a set width, could be pixels, percent etc, and height (this includes if there is no container, the body/html needs to be specified to 100% height and width, otherwise the map doesn't show).

 

Problem arrives when I try to put the map inside the BOOTSTRAP defined class "row". I tried to make my own CSS for the class as well and tag on !important but this did not work. Naturally, "row" is designed to resize as needed.

 

Anyone can suggest a workaround for this issue?

[dsonesuk]

The row class is used to contain element with bootstrap styling for 100%, ie col-xx-12 where xx will equal lg, md, sm, xs depending on device type.You can add col-xx-12 to row class element with customize class to overide row, col-xx-12 padding and margins as in .myclass.row.col-xx-12 {...}, but this is unadvisable as the padding, margins help to equally space these elements from other elements and device edges.