Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/bootstrap-weather

Responsive Weather templates built with the latest Bootstrap 5. Examples of UI with icons, cards, real data from API, interactive animated backgrounds.
https://github.com/mdbootstrap/bootstrap-weather

bootstrap bootstrap-responsive bootstrap-template bootstrap-ui bootstrap5 cards responsive weather weather-template

Last synced: about 1 month ago
JSON representation

Responsive Weather templates built with the latest Bootstrap 5. Examples of UI with icons, cards, real data from API, interactive animated backgrounds.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-weather
Owner: mdbootstrap
License: other
Created: 2021-08-13T14:09:56.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-01-28T08:58:57.000Z (almost 3 years ago)
Last Synced: 2024-07-21T13:18:00.318Z (4 months ago)
Topics: bootstrap, bootstrap-responsive, bootstrap-template, bootstrap-ui, bootstrap5, cards, responsive, weather, weather-template
Language: JavaScript
Homepage: https://mdbootstrap.com/docs/standard/extended/weather/
Size: 956 KB
Stars: 5
Watchers: 5
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

Responsive Weather templates built with the latest Bootstrap 5. Examples of UI with icons, cards, real data from API, interactive animated backgrounds & more

Check out [Bootstrap Weather Documentation](https://mdbootstrap.com/docs/standard/extended/weather/) for detailed instructions & even more examples.

## Basic example

![Bootstrap 5 Weather](https://mdbootstrap.com/img/Marketing/github/weather/basic.png)

```html

Warsaw

15:07

13°C

Stormy

40 km/h

84%

0.2h

```

## How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples

[Bootstrap Weather App:
![Bootstrap 5 Weather](https://mdbootstrap.com/img/Marketing/github/weather/section-2.png)](https://mdbootstrap.com/docs/standard/extended/weather/#section-2)

[Bootstrap Current Weather animated App:
![Bootstrap 5 Weather](https://mdbootstrap.com/img/Marketing/github/weather/section-3.png)](https://mdbootstrap.com/docs/standard/extended/weather/#section-3)

[Bootstrap Weather card:
![Bootstrap 5 Weather](https://mdbootstrap.com/img/Marketing/github/weather/section-4.png)](https://mdbootstrap.com/docs/standard/extended/weather/#section-4)

[Bootstrap Current Weather info card:
![Bootstrap 5 Weather](https://mdbootstrap.com/img/Marketing/github/weather/section-5.png)](https://mdbootstrap.com/docs/standard/extended/weather/#section-5)

[Bootstrap Weather report:
![Bootstrap 5 Weather](https://mdbootstrap.com/img/Marketing/github/weather/section-6.png)](https://mdbootstrap.com/docs/standard/extended/weather/#section-6)

[Bootstrap Weather card UI:
![Bootstrap 5 Weather](https://mdbootstrap.com/img/Marketing/github/weather/section-7.png)](https://mdbootstrap.com/docs/standard/extended/weather/#section-7)

___

## More extended Bootstrap documentation