Weather

Bootstrap 5 Weather templates & widgets

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


Basic example

Warsaw
15:07
13°C
Stormy
40 km/h
84%
0.2h

          <section class="vh-100" style="background-color: #4B515D;">
            <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="color: #4B515D; 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" style="color: #1C2331;"> 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://mdbootstrap.com/img/Photos/new-templates/bootstrap-weather/ilu1.png" width="100px"> 
                        </div>
                      </div>
      
                    </div>
                  </div>
      
                </div>
              </div>
      
            </div>
          </section>
        

Weather App

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>
        

Current Weather animated App

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 = ".png";
        
              // 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


          <section class="vh-100" style="background-color: #C1CFEA;">
            <div class="container py-5 h-100">
        
              <div class="row d-flex justify-content-center align-items-center h-100" style="color: #282828;">
                <div class="col-md-9 col-lg-7 col-xl-5">
        
                  <div class="card mb-4 gradient-custom" style="border-radius: 25px;">
                    <div class="card-body p-4">
        
                      <div id="demo1" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ul class="carousel-indicators mb-0">
                          <li data-target="#demo1" data-slide-to="0" class="active"></li>
                          <li data-target="#demo1" data-slide-to="1"></li>
                          <li data-target="#demo1" data-slide-to="2"></li>
                        </ul> 
                        <!-- Carousel inner -->
                        <div class="carousel-inner">
                          <div class="carousel-item active">
                            <div class="d-flex justify-content-between mb-4 pb-2">
                              <div>
                                <h2 class="display-2"><strong>23°C</strong></h2>
                                <p class="text-muted mb-0">Coimbra, Portugal</p>
                              </div>
                              <div>
                                <img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-weather/ilu3.png"
                                  width="150px">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
        
                    </div>
                  </div>
        
                  <div class="card mb-4" style="border-radius: 25px;">
                    <div class="card-body p-4">
        
                      <div id="demo2" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ul class="carousel-indicators mb-0">
                          <li data-target="#demo2" data-slide-to="0"></li>
                          <li data-target="#demo2" data-slide-to="1" class="active"></li>
                          <li data-target="#demo2" data-slide-to="2"></li>
                        </ul> 
                        <!-- Carousel inner -->
                        <div class="carousel-inner">
                          <div class="carousel-item active">
                            <div class="d-flex justify-content-around text-center mb-4 pb-3 pt-2">
                              <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>
                      </div>
        
                    </div>
                  </div>
        
                  <div class="card" style="border-radius: 25px;">
                    <div class="card-body p-4">
        
                      <div id="demo3" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ul class="carousel-indicators mb-0">
                          <li data-target="#demo3" data-slide-to="0"></li>
                          <li data-target="#demo3" data-slide-to="1"></li>
                          <li data-target="#demo3" data-slide-to="2" class="active"></li>
                        </ul> 
                        <!-- Carousel inner -->
                        <div class="carousel-inner">
                          <div class="carousel-item active">
                            <div class="d-flex justify-content-around text-center mb-4 pb-3 pt-2">
                              <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>
        
                    </div>
                  </div>
        
                </div>
              </div>
        
            </div>
          </section>
        

          .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))
          }
      
          .carousel-indicators li {
            background-color: #282828;
            width: 7px;
            height: 7px;
            border-radius: 50%;
          }
        

Current Weather info card

weather

Juneau, Alaska, US

1.28°C

Feels Like: -1.08 °C

Snowy

          <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://mdbootstrap.com/img/Photos/new-templates/bootstrap-weather/draw1.png"
                        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

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

Clear night

Detroit, US

20°C

Yesterday

23°C

Tommorow

21°C


          <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://mdbootstrap.com/img/Photos/new-templates/bootstrap-weather/draw2.png" 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>