OpenLayers and Bootstrap

This example demonstrates an OpenLayers map in a fluid layout using Bootstrap CSS.

Note that the OpenLayers stylesheet is loaded before Bootstrap. The Bootstrap CSS sets the maximum width for images to be 100% (of their containing element).

img {
    max-width: 100%;
}

This causes problems for images that you might want to be bigger than their containing element (e.g. big tile in small map viewport). To overcome this, the OpenLayers CSS overrides this max-width setting. If you are not loading the OpenLayers default CSS or are having trouble with tile sizing and Bootstrap, add the following to your markup:

<style>
    img.olTileImage {
        max-width: none;
    }
</style>