Create a Weather Template App using CSS & Bootstrap Last Updated : 30 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The Weather Template App showcases a simple weather card layout with input for city names. It dynamically updates weather details such as temperature, weather conditions, humidity, wind speed, and visibility, complemented by a sun icon for sunny forecasts.PrerequisitesHTMLCSSBootstrapApproachThis Weather App template provides a user-friendly interface for checking weather conditions. Users can input a city name to retrieve real-time weather data. The layout features a clean design with a weather card displaying temperature, weather condition, humidity, wind speed, and visibility. A sun icon is positioned at the top right corner to indicate sunny weather. The app utilizes Bootstrap for styling and icons, ensuring responsiveness across devices. JavaScript enables dynamic content display and interactionExample: This example shows the implementation of the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App</title> <!-- Include Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Include Bootstrap Icons --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> <style> body { background-color: #f0f2f5; } .weather-card { max-width: 400px; margin: 50px auto; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background-color: #fff; position: relative; /* To position the sun icon */ } .weather-title { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 20px; } .input-group-text { background-color: #fff; border: none; } .weather-icon { font-size: 48px; margin-bottom: 20px; } .weather-info { font-size: 18px; color: #555; margin-bottom: 10px; } .weather-btn { background-color: #007bff; border: none; } .weather-btn:hover { background-color: #0056b3; } .sunny-icon { position: absolute; top: 10px; right: 10px; color: #ffce00; font-size: 48px; } </style> </head> <body> <div class="weather-card"> <div class="row justify-content-end"> <div class="col-auto"> <div class="sunny-icon"> <i class="bi bi-sun-fill"></i> </div> </div> </div> <h1 class="weather-title text-center mb-4"> Weather App</h1> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Enter Your City Name" aria-label="City Name" aria-describedby="basic-addon2"> <button class="btn btn-primary weather-btn" type="button" id="button-addon2">Get Weather</button> </div> <div id="weatherInfo"> <div class="weather-icon text-center"> <i class="bi bi-cloud-sun"></i> </div> <div class="weather-info text-center"> <p>Temperature: 20°C</p> <p>Weather: Sunny</p> <p>Humidity: 60%</p> <p>Wind Speed: 5 m/s</p> <p>Visibility: 10 km</p> </div> </div> </div> <!-- Include Bootstrap JS --> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html> Output: Comment More infoAdvertise with us Next Article Design a Google Chrome Page Template using Bootstrap G geekcoder2298 Follow Improve Article Tags : CSS Dev Scripter 2024 Similar Reads Create a Weather App in HTML Bootstrap & JavaScript A weather app contains a user input field for the user, which takes the input of the city name. Once the user enters the city name and clicks on the button, then the API Request is been sent to the OpenWeatherMap and the response is been retrieved in the application which consists of weather, wind s 3 min read Design a Google Chrome Page Template using Bootstrap The Chrome template replicates Google's search page with navigation links, a search input section, and buttons. It uses Bootstrap for styling and responsiveness, resembling Google Chrome's familiar interface.PrerequisitesHTMLCSSBootstrapApproachThis app recreates the Google Chrome template using Boo 2 min read Create a Portfolio Website Template using Tailwind CSS In this tutorial, we'll guide you through the process of creating a stunning portfolio website using Tailwind CSS, a powerful CSS framework that makes styling web pages easy and efficient. Preview of Final Output: Let us have a look at how the final output will look like. Personal PortfolioPrerequis 6 min read Create a Real-Time Weather Forecast App with React Real-time weather forecast app with React involves integrating with a weather API to fetch weather data and display it in the UI. Individuals can use the app to check the current weather conditions, temperature, humidity, and other relevant weather data for their location or any city they are intere 5 min read How to create a two tone banner in bootstrap ? Bootstrap is a CSS framework used to design webpages. It is the most widely used CSS framework all over due to its simplicity and ease of implementation. Bootstrap is used along with HTML and JavaScript to make the webpages interactive. Banners are section in the webpage that call for extra attentio 3 min read Build A Weather App in HTML CSS & JavaScript A weather app contains a user input field for the user, which takes the input of the city name. Once the user enters the city name and clicks on the button, then the API Request is been sent to the OpenWeatherMap and the response is been retrieved in the application which consists of weather, wind s 7 min read Like