Google Maps in Bootstrap tabs

The map won’t work if it is in a tab that is initially hidden. There are lots of JS solutions, but it can be fixed with just the following CSS:

.tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .tab-pane.active {
    display: block;
    height:auto;
}

Let us know if this snippet is not working for you:

This snippet doesn’t work
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments