NiceSnippets.com
Different Types Of Weather Widget Card With Bootstrap 4
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="//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="//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="//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;
}
