CSS Naming conflicts within API

HeathClark

While there may be other cases, the use of the class 'container' in such a generic form is causing conflicts when trying to incorporate Bootstrap styling into an ESRI map based site.

ex. within a map-display / map class : <div id="map_div_root" class="container".....<div id="map_div_container" class="container">..
the generic use of "container" generates a side effect of a max-width of the map being set by Bootstrap.

While this can be overcome with some basic css, would using an esri- prefix within js.api generated objects all but eliminate current and future css conflicts?  Some of the more popular "add-ons" are revising their naming conventions to avoid such conflicts (Font Awesome is a great example as they just changed their icon- prefix to fa-).  Just an idea/suggestion.

JonathanUihlein

As eitdhc suggested, I would just edit the default stylesheet instead of messing with bootstrap settings.

In esri.css:

.map .container {
    border: medium none;
    height: 100%;
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    top: 0;
    width: 100% !important;
}

As expected, there is no specific styling for a standalone '.container' node in esri.css.
It must be a child of a '.map' div.