Responsive maps with Vue Bootstrap 5. A collection of Vue Bootstrap templates for Google maps, vector maps, maps with contact us sections, maps with address & more.
With Bootstrap you can use Google Maps as well as dedicated vector maps. You can select certain regions, subcontinents, continents countries & cities. Maps are also a great way to present data or set up a country filter.
Basic examples Google Map in Bootstrap gridYou have to add class .w-100 to the iframe element in order to make sure that your Google Map embeds are fully responsive. You should also delete the fix height & width that Google adds to Map embeds by default. Learn more about the w-100 class in the Sizing Utilities documentation.
Try to resize your browser window - you will see that it starts to take up 12 columns on screens smaller than 992px.
This useful feature helps to make your embedded map responsive (mobile friendly). You can customize responsive behavior with the use of breakpoints.
This text looks so nice because it's vertically centered you can achieve this effect using the vertical alignment layout option.
Vector Map in Bootstrap gridVector Maps are very easy to implement with the use of Vector maps plugin for Bootstrap.
This map is embedded in a 6 column layoutTry to resize your browser window - you will see that it starts to take up 12 columns on screens smaller than 992px.
This useful feature helps to make your embedded map responsive (mobile friendly). You can customize responsive behavior with the use of breakpoints.
This text looks so nice because it's vertically centered you can achieve this effect using the vertical alignment layout option.
Custom Vector MapsDifferent styles of vector maps - you can customize them even more.
Interactive Bootstrap Map with dataAn interactive vector map built with Bootstrap including filters for different data sets and tooltips with country names and values.
Bootstrap Map in modalCheck out the modals documentation, to learn more about embedding a map in a popup window.
Bootstrap World Map with legend & data from APIYou can use custom APIs for presenting data in your maps. See the API section in the vector maps plugin documentation.
Custom Google MapsDifferent styles & use cases of Google Maps embedded in your projects - you can customize them even more.
Bootstrap "Contact us" section with a mapIncluding a map in your contact us section is a great way to present your company address. You can also include a map preview in an address form i.e. during a checkout, to confirm a delivery address.
Google map in a Bootstrap cardA Google map can easily be embedded inside of a Bootstrap card with the use of iframe.
Central Park Zoo A place to relax 25 min East 64th Street, New York, NY 10021, US Closed Opens 10 AM Sunny weather tomorrowRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4