We are giving you different types of bootstrap 4 weather card design example with free source code. advance weather widget design with animation. Here three types of weather widget design demo. bootstrap 4 weather forecast. bootstrap weather snippet. bootstrap weather display. weather dashboard bootstrap.

We allows to free snippets of bootstrap weather template , you can download full code of bootstrap weather widget free layout. Here in this post i will give you example of bootstrap free weather widget snippet and you will get simple code of html, css and jquery. In bootstrap jquery weather snippet i give you three tab with html, css and js, you can easily get code of weather dashboard bootstrap layout.


<!DOCTYPE html> <html> <head> <title>Weather Card Design Bootstrap 4.0</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container mainsection p-2"> <div class="row p-0 m-0"> <div class="col-lg-12 hedding pb-4"> <h1 class="badge badge-dark">Weather Card Design Bootstrap 4.0</h1> </div> <div class="col-lg-4 pb-4"> <div class="weather-part-one border"> <div class="row"> <div class="col-lg-12 weather-part-one-image"> <img src="http://nicesnippets.com/demo/weather-image1.gif"> <div class="badge badge-danger weather-part-one-image-label pl-3 pr-3 pt-2 rounded-0"> <p>16</p> <p>july</p> </div> </div> <div class="col-lg-12 text-center"> <div class="weather-part-one-information p-3"> <span class="text-white">Rain</span> <h1 class="text-white">India</h1> </div> </div> <div class="col-lg-12 col-12 text-center"> <div class="weather-part-one-icon"> <div class="row"> <div class="col-lg-4 col-4 p-2"> <p class="pt-3"><i class="fa fa-thermometer-quarter" aria-hidden="true"></i></p> <p>25 <sup>C <sup><i class="fa fa-circle-o" aria-hidden="true"></i></sup></sup></p> </div> <div class="col-lg-4 col-4 p-2"> <p class="pt-3"><i class="fa fa-sun-o" aria-hidden="true"></i></p> <p>50%</p> </div> <div class="col-lg-4 col-4 p-2"> <p class="pt-3"><i class="fa fa-bolt" aria-hidden="true"></i></p> <p>2MPH</p> </div> </div> </div> </div> </div> </div> </div> <div class="col-lg-5 pb-4"> <div class="weather-part-second border"> <div class="row"> <div class="col-lg-12 weather-part-second-image"> <img src="http://nicesnippets.com/demo/weather-image2.jpg"> <div class="badge badge-danger weather-part-second-image-label pl-3 pr-3 pt-2 rounded-0"> <p>15</p> <p>jun</p> </div> </div> <div class="col-lg-12 col-12 text-center"> <div class="weather-part-second-icon bg-white"> <div class="row"> <div class="col-lg-2 col-6 p-2"> <p class="pt-3"><i class="fa fa-thermometer-quarter" aria-hidden="true"></i></p> <p>25 <sup><i class="fa fa-circle-o" aria-hidden="true"></i></sup></sup></p> <p>6pm</p> </div> <div class="col-lg-2 col-6 p-2"> <p class="pt-3"><i class="fa fa-cloud" aria-hidden="true"></i></p> <p>30 <sup>C <sup><i class="fa fa-circle-o" aria-hidden="true"></i></sup></sup></p> <p>8pm</p> </div> <div class="col-lg-2 col-6 p-2"> <p class="pt-3"><i class="fa fa-sun-o" aria-hidden="true"></i></p> <p>28<sup>C <sup><i class="fa fa-circle-o" aria-hidden="true"></i></sup></sup></p> <p>12am</p> </div> <div class="col-lg-2 col-6 p-2"> <p class="pt-3"><i class="fa fa-thermometer-quarter" aria-hidden="true"></i></p> <p>25 <sup>C <sup><i class="fa fa-circle-o" aria-hidden="true"></i></sup></sup></p> <p>8am</p> </div> <div class="col-lg-2 col-6 p-2"> <p class="pt-3"><i class="fa fa-bolt" aria-hidden="true"></i></p> <p>50%</p> <p>10pm</p> </div> <div class="col-lg-2 col-6 p-2"> <p class="pt-3"><i class="fa fa-thermometer-quarter" aria-hidden="true"></i></p> <p>2MPH</p> <p>1am</p> </div> </div> </div> </div> </div> </div> </div> <div class="col-lg-3"> <div class="weather-part-third border"> <div class="row"> <div class="col-lg-12 weather-part-third-image"> <img src="http://nicesnippets.com/demo/weather-image3.gif"> <div class="badge badge-danger weather-part-third-image-label pl-3 pr-3 pt-2 rounded-0"> <p>20</p> <p>Aug</p> </div> </div> <div class="col-lg-12 col-12 text-center"> <div class="weather-part-thitd-icon"> <div class="row"> <div class="col-lg-4 col-4 p-2"> <p class="pt-3"><i class="fa fa-thermometer-quarter" aria-hidden="true"></i></p> <p>25 <sup><i class="fa fa-circle-o" aria-hidden="true"></i></sup></sup></p> <p>6pm</p> </div> <div class="col-lg-4 col-4 p-2"> <p class="pt-3"><i class="fa fa-cloud" aria-hidden="true"></i></p> <p>30 <sup>C <sup><i class="fa fa-circle-o" aria-hidden="true"></i></sup></sup></p> <p>8pm</p> </div> <div class="col-lg-4 col-4 p-2"> <p class="pt-3"><i class="fa fa-sun-o" aria-hidden="true"></i></p> <p>28<sup>C <sup><i class="fa fa-circle-o" aria-hidden="true"></i></sup></sup></p> <p>12am</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
body{ background-color: #FAFAFA; } .hedding{ font-size:22px; } .mainsection{ margin-top:50px; font-family: 'Roboto Condensed', sans-serif; } .weather-part-one-image img,.weather-part-second-image img,.weather-part-third-image img{ width: 100%; height: auto; margin:0px; } .weather-part-one,.weather-part-second,.weather-part-third{ box-shadow:1px 0px 10px #a2a2a2; } .weather-part-one-image,.weather-part-second-image{ position: relative; } .weather-part-one-image-label,.weather-part-second-image-label,.weather-part-third-image-label{ position: absolute; top:50px; right:15px; font-size: 15px; box-shadow:1px 2px 5px #000; } .weather-part-second-image-label{ bottom:0px; top:unset; } .weather-part-third-image-label{ top:0px; left:25px; right:unset; } .weather-part-one-information{ background-color: #bfb17c; } .weather-part-one-icon{ background-color: #000; color:#fff; font-size:22px; } .fa-circle-o{ font-size:8px; } .weather-part-thitd-icon{ background-color: #EDEADE; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post