Weather
Bootstrap 5 Weather templates & widgets
Responsive Weather templates built with the latest Bootstrap 5. Examples of weather dashboards with icons, cards, real data from API, interactive animated backgrounds & moreBasic weather widget
Simple weather card with temperature, wind & humidity metrics.
Warsaw
15:07
13°C
Stormy 40 km/h
84%
0.2h
<div class="row d-flex justify-content-center py-5">
<div class="col-md-8 col-lg-6 col-xl-5">
<div class="card text-body" style=" border-radius: 35px;">
<div class="card-body p-4">
<div class="d-flex">
<h6 class="flex-grow-1">Warsaw</h6>
<h6>15:07</h6>
</div>
<div class="d-flex flex-column text-center mt-5 mb-4">
<h6 class="display-4 mb-0 font-weight-bold"> 13°C </h6>
<span class="small" style="color: #868B94">Stormy</span>
</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1" style="font-size: 1rem;">
<div><i class="fas fa-wind fa-fw" style="color: #868B94;"></i> <span class="ms-1"> 40 km/h
</span>
</div>
<div><i class="fas fa-tint fa-fw" style="color: #868B94;"></i> <span class="ms-1"> 84%
</span></div>
<div><i class="fas fa-sun fa-fw" style="color: #868B94;"></i> <span class="ms-1"> 0.2h
</span></div>
</div>
<div>
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/ilu1.webp"
width="100px">
</div>
</div>
</div>
</div>
</div>
</div>
Weather App
A simple application design for checking the weather in a given city.
Check the weather forecast
New York, US
Current temperature: 5.42°C
Feels like: 4.37°C
Max: 6.11°C, Min: 3.89°C
Scattered Clouds
<section class="vh-100">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-8 col-lg-6 col-xl-4">
<h3 class="mb-4 pb-2 fw-normal">Check the weather forecast</h3>
<div class="input-group rounded mb-3">
<input type="search" class="form-control rounded" placeholder="City" aria-label="Search"
aria-describedby="search-addon" />
<a href="#!" type="button">
<span class="input-group-text border-0 fw-bold" id="search-addon">
Check!
</span>
</a>
</div>
<div class="mb-4 pb-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
value="option1" checked />
<label class="form-check-label" for="inlineRadio1">Celsius</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
value="option2" />
<label class="form-check-label" for="inlineRadio2">Farenheit</label>
</div>
</div>
<div class="card shadow-0 border">
<div class="card-body p-4">
<h4 class="mb-1 sfw-normal">New York, US</h4>
<p class="mb-2">Current temperature: <strong>5.42°C</strong></p>
<p>Feels like: <strong>4.37°C</strong></p>
<p>Max: <strong>6.11°C</strong>, Min: <strong>3.89°C</strong></p>
<div class="d-flex flex-row align-items-center">
<p class="mb-0 me-4">Scattered Clouds</p>
<i class="fas fa-cloud fa-3x" style="color: #eee;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Weather dashboard with API
A simple dashboard displaying current & future weather with data from free API setup using JavaScript.
Pressure:
|
Humidity:
Now
![]()
Today
Tomorrow
28
Day after tomorrow
28
<section class="vh-100">
<div class="container py-5">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-9 col-lg-7 col-xl-5">
<div id="wrapper-bg" class="card text-white bg-image shadow-4-strong"
style="background-image: url('img/clouds.gif')">
<!-- Main current data -->
<div class="card-header p-4 border-0">
<div class="text-center mb-3">
<p class="h2 mb-1" id="wrapper-name"></p>
<p class="mb-1" id="wrapper-description"></p>
<p class="display-1 mb-1" id="wrapper-temp"></p>
<span class="">Pressure: <span id="wrapper-pressure"></span></span>
<span class="mx-2">|</span>
<span class="">Humidity: <span id="wrapper-humidity"></span></span>
</div>
</div>
<!-- Hourly forecast -->
<div class="card-body p-4 border-top border-bottom mb-2">
<div class="row text-center">
<div class="col-2">
<strong class="d-block mb-2">Now</strong>
<img id="wrapper-icon-hour-now" src="" class="" alt="" />
<strong class="d-block" id="wrapper-hour-now"></strong>
</div>
<div class="col-2">
<strong class="d-block mb-2" id="wrapper-time1"></strong>
<img id="wrapper-icon-hour1" src="" class="" alt="" />
<strong class="d-block" id="wrapper-hour1"></strong>
</div>
<div class="col-2">
<strong class="d-block mb-2" id="wrapper-time2"></strong>
<img id="wrapper-icon-hour2" src="" class="" alt="" />
<strong class="d-block" id="wrapper-hour2"></strong>
</div>
<div class="col-2">
<strong class="d-block mb-2" id="wrapper-time3"></strong>
<img id="wrapper-icon-hour3" src="" class="" alt="" />
<strong class="d-block" id="wrapper-hour3"></strong>
</div>
<div class="col-2">
<strong class="d-block mb-2" id="wrapper-time4"></strong>
<img id="wrapper-icon-hour4" src="" class="" alt="" />
<strong class="d-block" id="wrapper-hour4"></strong>
</div>
<div class="col-2">
<strong class="d-block mb-2" id="wrapper-time5"></strong>
<img id="wrapper-icon-hour5" src="" class="" alt="" />
<strong class="d-block" id="wrapper-hour5"></strong>
</div>
</div>
</div>
<!-- Daily forecast -->
<div class="card-body px-5">
<div class="row align-items-center">
<div class="col-lg-6">
<strong>Today</strong>
</div>
<div class="col-lg-2 text-center">
<img id="wrapper-icon-today" src="" class="w-100" alt="" />
</div>
<div class="col-lg-4 text-end">
<span id="wrapper-forecast-temp-today"></span>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-6">
<strong>Tomorrow</strong>
</div>
<div class="col-lg-2 text-center">
<img id="wrapper-icon-tomorrow" src="" class="w-100" alt="" />
</div>
<div class="col-lg-4 text-end">
<span id="wrapper-forecast-temp-tomorrow">28</span>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-6">
<strong>Day after tomorrow</strong>
</div>
<div class="col-lg-2 text-center">
<img id="wrapper-icon-dAT" src="" class="w-100" alt="" />
</div>
<div class="col-lg-4 text-end">
<span id="wrapper-forecast-temp-dAT">28</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
// API call
let queryUrl = "https://api.openweathermap.org/data/2.5/onecall?";
let lat = "lat=52.229676&";
let lon = "lon=21.012229&";
let apiOptions = "units=metric&exclude=minutely,alerts&";
let apiKey = "appid=dbb76c5d98d5dbafcb94441c6a10236e";
let file = queryUrl + lat + lon + apiOptions + apiKey;
fetch(file)
.then((response) => response.json())
.then((data) => {
// Weather main data
let main = data.current.weather[0].main;
let description = data.current.weather[0].description;
let temp = Math.round(data.current.temp);
let pressure = data.current.pressure;
let humidity = data.current.humidity;
let name = "Warsaw";
document.getElementById("wrapper-description").innerHTML = description;
document.getElementById("wrapper-temp").innerHTML = temp + "°C";
document.getElementById("wrapper-pressure").innerHTML = pressure;
document.getElementById("wrapper-humidity").innerHTML = humidity + "°C";
document.getElementById("wrapper-name").innerHTML = name;
// Weather hourly data
let hourNow = data.hourly[0].temp;
let hour1 = data.hourly[1].temp;
let hour2 = data.hourly[2].temp;
let hour3 = data.hourly[3].temp;
let hour4 = data.hourly[4].temp;
let hour5 = data.hourly[5].temp;
document.getElementById("wrapper-hour-now").innerHTML = hourNow + "°";
document.getElementById("wrapper-hour1").innerHTML = hour1 + "°";
document.getElementById("wrapper-hour2").innerHTML = hour2 + "°";
document.getElementById("wrapper-hour3").innerHTML = hour3 + "°";
document.getElementById("wrapper-hour4").innerHTML = hour4 + "°";
document.getElementById("wrapper-hour5").innerHTML = hour5 + "°";
// Time
let timeNow = new Date().getHours();
let time1 = timeNow + 1;
let time2 = time1 + 1;
let time3 = time2 + 1;
let time4 = time3 + 1;
let time5 = time4 + 1;
document.getElementById("wrapper-time1").innerHTML = time1;
document.getElementById("wrapper-time2").innerHTML = time2;
document.getElementById("wrapper-time3").innerHTML = time3;
document.getElementById("wrapper-time4").innerHTML = time4;
document.getElementById("wrapper-time5").innerHTML = time5;
// Weather daily data
let tomorrowTemp = Math.round(data.daily[0].temp.day);
let dATTemp = Math.round(data.daily[1].temp.day);
let tomorrowMain = data.daily[0].weather[0].main;
let dATTempMain = data.daily[1].weather[0].main;
document.getElementById("wrapper-forecast-temp-today").innerHTML =
temp + "°";
document.getElementById("wrapper-forecast-temp-tomorrow").innerHTML =
tomorrowTemp + "°";
document.getElementById("wrapper-forecast-temp-dAT").innerHTML =
dATTemp + "°";
// Icons
let iconBaseUrl = "http://openweathermap.org/img/wn/";
let iconFormat = ".webp";
// Today
let iconCodeToday = data.current.weather[0].icon;
let iconFullyUrlToday = iconBaseUrl + iconCodeToday + iconFormat;
document.getElementById("wrapper-icon-today").src = iconFullyUrlToday;
// Tomorrow
let iconCodeTomorrow = data.daily[0].weather[0].icon;
let iconFullyUrlTomorrow = iconBaseUrl + iconCodeTomorrow + iconFormat;
document.getElementById(
"wrapper-icon-tomorrow"
).src = iconFullyUrlTomorrow;
// Day after tomorrow
let iconCodeDAT = data.daily[1].weather[0].icon;
let iconFullyUrlDAT = iconBaseUrl + iconCodeDAT + iconFormat;
document.getElementById("wrapper-icon-dAT").src = iconFullyUrlDAT;
// Icons hourly
// Hour now
let iconHourNow = data.hourly[0].weather[0].icon;
let iconFullyUrlHourNow = iconBaseUrl + iconHourNow + iconFormat;
document.getElementById(
"wrapper-icon-hour-now"
).src = iconFullyUrlHourNow;
// Hour1
let iconHour1 = data.hourly[1].weather[0].icon;
let iconFullyUrlHour1 = iconBaseUrl + iconHour1 + iconFormat;
document.getElementById("wrapper-icon-hour1").src = iconFullyUrlHour1;
// Hour2
let iconHour2 = data.hourly[2].weather[0].icon;
let iconFullyUrlHour2 = iconBaseUrl + iconHour2 + iconFormat;
document.getElementById("wrapper-icon-hour2").src = iconFullyUrlHour1;
// Hour3
let iconHour3 = data.hourly[3].weather[0].icon;
let iconFullyUrlHour3 = iconBaseUrl + iconHour3 + iconFormat;
document.getElementById("wrapper-icon-hour3").src = iconFullyUrlHour3;
// Hour4
let iconHour4 = data.hourly[4].weather[0].icon;
let iconFullyUrlHour4 = iconBaseUrl + iconHour4 + iconFormat;
document.getElementById("wrapper-icon-hour4").src = iconFullyUrlHour4;
// Hour5
let iconHour5 = data.hourly[5].weather[0].icon;
let iconFullyUrlHour5 = iconBaseUrl + iconHour5 + iconFormat;
document.getElementById("wrapper-icon-hour5").src = iconFullyUrlHour5;
// Backgrounds
switch (main) {
case "Snow":
document.getElementById("wrapper-bg").style.backgroundImage =
"url('https://mdbgo.io/ascensus/mdb-advanced/img/snow.gif')";
break;
case "Clouds":
document.getElementById("wrapper-bg").style.backgroundImage =
"url('https://mdbgo.io/ascensus/mdb-advanced/img/clouds.gif')";
break;
case "Fog":
document.getElementById("wrapper-bg").style.backgroundImage =
"url('https://mdbgo.io/ascensus/mdb-advanced/img/fog.gif')";
break;
case "Rain":
document.getElementById("wrapper-bg").style.backgroundImage =
"url('https://mdbgo.io/ascensus/mdb-advanced/img/rain.gif')";
break;
case "Clear":
document.getElementById("wrapper-bg").style.backgroundImage =
"url('https://mdbgo.io/ascensus/mdb-advanced/img/clear.gif')";
break;
case "Thunderstorm":
document.getElementById("wrapper-bg").style.backgroundImage =
"url('https://mdbgo.io/ascensus/mdb-advanced/img/thunderstorm.gif')";
break;
default:
document.getElementById("wrapper-bg").style.backgroundImage =
"url('https://mdbgo.io/ascensus/mdb-advanced/img/clear.gif')";
break;
}
});
Weather card
Minimalistic weather cards with background image reflecting temperature and clouds & sun icons.
23°C
Coimbra, Portugal
21°C
12:00
PM
2°C
1:00
PM
20°C
2:00
PM
19°C
3:00
PM
18°C
4:00
PM
21°C
Mon
20°C
Tue
16°C
Wed
17°C
Thu
18°C
Fri
<div id="weatherCarousel" class="carousel slide m-5" data-mdb-ride="carousel" data-mdb-carousel-init>
<div class="carousel-indicators">
<button type="button" data-mdb-target="#weatherCarousel" data-mdb-slide-to="0" class="active bg-secondary"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-mdb-target="#weatherCarousel" data-mdb-slide-to="1" class="bg-secondary"
aria-label="Slide 2"></button>
<button type="button" data-mdb-target="#weatherCarousel" data-mdb-slide-to="2" class="bg-secondary"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner rounded-5">
<div class="carousel-item active">
<div class="d-flex justify-content-between align-items-center px-5 gradient-custom" style="height: 230px">
<div>
<h2 class="text-dark display-2"><strong>23°C</strong></h2>
<p class="text-dark mb-0">Coimbra, Portugal</p>
</div>
<div>
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/ilu3.webp"
width="150px">
</div>
</div>
</div>
<div class="carousel-item">
<div class="d-flex justify-content-around text-center align-items-center px-5 bg-body-tertiary"
style="height: 230px">
<div class="flex-column">
<p class="small"><strong>21°C</strong></p>
<i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>12:00</strong></p>
<p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
</div>
<div class="flex-column">
<p class="small"><strong>2°C</strong></p>
<i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>1:00</strong></p>
<p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
</div>
<div class="flex-column">
<p class="small"><strong>20°C</strong></p>
<i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>2:00</strong></p>
<p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
</div>
<div class="flex-column">
<p class="small"><strong>19°C</strong></p>
<i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>3:00</strong></p>
<p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
</div>
<div class="flex-column">
<p class="small"><strong>18°C</strong></p>
<i class="fas fa-cloud-showers-heavy fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>4:00</strong></p>
<p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="d-flex justify-content-around text-center align-items-center px-5 bg-body-tertiary"
style="height: 230px">
<div class="flex-column">
<p class="small"><strong>21°C</strong></p>
<i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>Mon</strong></p>
</div>
<div class="flex-column">
<p class="small"><strong>20°C</strong></p>
<i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>Tue</strong></p>
</div>
<div class="flex-column">
<p class="small"><strong>16°C</strong></p>
<i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>Wed</strong></p>
</div>
<div class="flex-column">
<p class="small"><strong>17°C</strong></p>
<i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>Thu</strong></p>
</div>
<div class="flex-column">
<p class="small"><strong>18°C</strong></p>
<i class="fas fa-cloud-showers-heavy fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>Fri</strong></p>
</div>
</div>
</div>
</div>
</div>
.gradient-custom {
/* fallback for old browsers */
background: #ffffff;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 236, 210, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 236, 210, 1))
}
Current Weather info card
An illustrated card with current weather information.
<section class="vh-100" style="background-color: #f5f6f7;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-10 col-lg-8 col-xl-6">
<div class="card bg-dark text-white" style="border-radius: 40px;">
<div class="bg-image" style="border-radius: 35px;">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/draw1.webp"
class="card-img" alt="weather" />
<div class="mask" style="background-color: rgba(190, 216, 232, .5);"></div>
</div>
<div class="card-img-overlay text-dark p-5">
<h4 class="mb-0">Juneau, Alaska, US</h4>
<p class="display-2 my-3">1.28°C</p>
<p class="mb-2">Feels Like: <strong>-1.08 °C</strong></p>
<h5>Snowy</h5>
</div>
</div>
</div>
</div>
</div>
</section>
Weather report
A minimalistic weather report dashboard with white background and black borders and a simple table for weather data.
Toronto
21.02.2021
Rain map
-4°C
10:00
Sunday
Cloudy
Sun
-4°C
Mon
-4°C
Tue
-4°C
Wed
-4°C
Thu
-4°C
Fri
-4°C
Sat
-4°C
For a month
11:00 -4°
12:00 -4°
13:00 -5°
14:00 -7°
15:00 -6°
16:00 -4°
17:00 -3°
<section class="vh-100" style="background-color: #cdc4f9;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-12 col-xl-10">
<div class="card shadow-0 border border-dark border-5 text-dark" style="border-radius: 10px;">
<div class="card-body p-4">
<div class="row text-center">
<div class="col-md-9 text-center border-end border-5 border-dark py-4"
style="margin-top: -1.5rem; margin-bottom: -1.5rem;">
<div class="d-flex justify-content-around mt-3">
<p class="small">Toronto</p>
<p class="small">21.02.2021</p>
<p class="small">Rain map</p>
</div>
<div class="d-flex justify-content-around align-items-center py-5 my-4">
<p class="fw-bold mb-0" style="font-size: 7rem;">-4°C</p>
<div class="text-start">
<p class="small">10:00</p>
<p class="h3 mb-3">Sunday</p>
<p class="small mb-0">Cloudy</p>
</div>
</div>
<div class="d-flex justify-content-around align-items-center mb-3">
<div class="flex-column">
<i class="fas fa-minus"></i>
</div>
<div class="flex-column border" style="border-radius: 10px; padding: .75rem">
<p class="small mb-1">Sun</p>
<p class="small mb-0"><strong>-4°C</strong></p>
</div>
<div class="flex-column">
<p class="small mb-1">Mon</p>
<p class="small mb-0"><strong>-4°C</strong></p>
</div>
<div class="flex-column">
<p class="small mb-1">Tue</p>
<p class="small mb-0"><strong>-4°C</strong></p>
</div>
<div class="flex-column">
<p class="small mb-1">Wed</p>
<p class="small mb-0"><strong>-4°C</strong></p>
</div>
<div class="flex-column">
<p class="small mb-1">Thu</p>
<p class="small mb-0"><strong>-4°C</strong></p>
</div>
<div class="flex-column">
<p class="small mb-1">Fri</p>
<p class="small mb-0"><strong>-4°C</strong></p>
</div>
<div class="flex-column">
<p class="small mb-1">Sat</p>
<p class="small mb-0"><strong>-4°C</strong></p>
</div>
<div class="flex-column">
<i class="fas fa-minus"></i>
</div>
</div>
</div>
<div class="col-md-3 text-end">
<p class="small mt-3 mb-5 pb-5">For a month</p>
<p class="pb-1"><span class="pe-2">11:00</span> <strong>-4°</strong></p>
<p class="pb-1"><span class="pe-2">12:00</span> <strong>-4°</strong></p>
<p class="pb-1"><span class="pe-2">13:00</span> <strong>-5°</strong></p>
<p class="pb-1"><span class="pe-2">14:00</span> <strong>-7°</strong></p>
<p class="pb-1"><span class="pe-2">15:00</span> <strong>-6°</strong></p>
<p class="pb-1"><span class="pe-2">16:00</span> <strong>-4°</strong></p>
<p><span class="pe-2">17:00</span> <strong>-3°</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Weather card UI
Beautiful weather widget styling, with basic weather info.
<section class="vh-100" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-8 col-lg-6 col-xl-4">
<div class="card" style="border-radius: 10px;">
<div class="bg-image ripple" data-mdb-ripple-color="light"
style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/draw2.webp"
class="w-100" />
<div class="mask" style="background-color: rgba(0,0,0,.45)">
<div class="d-flex justify-content-between p-4">
<a href="#!" class="text-white"><i class="fas fa-chevron-left fa-lg"></i></a>
<a href="#!" class="text-white"><i class="fas fa-cog fa-lg"></i></a>
</div>
<div class="text-center text-white">
<p class="h3 mb-4">Clear night</p>
<p class="h5 mb-4">Detroit, US</p>
<p class="display-2"><strong>20°C</strong> </p>
</div>
</div>
</div>
<div class="card-body p-4 text-center">
<a href="#!" class="text-body"><i class="fas fa-chevron-up fa-lg mb-4"></i></a>
<div class="d-flex justify-content-between mb-3">
<p class="h5 fw-normal">Yesterday</p>
<p class="h5 fw-normal"><i class="fas fa-sun pe-2"></i> 23°C</p>
</div>
<div class="d-flex justify-content-between" style="color: #aaa;">
<p class="h5 fw-normal">Tommorow</p>
<p class="h5 fw-normal"><i class="fas fa-cloud pe-2"></i> 21°C</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>