Giters

mdbootstrap / bootstrap-weather

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

Home Page:https://mdbootstrap.com/docs/standard/extended/weather/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

weatherbootstrapbootstrap5cardsresponsivebootstrap-responsivebootstrap-templatebootstrap-uiweather-template

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

Check out Bootstrap Weather Documentation for detailed instructions & even more examples.

Basic example

Bootstrap 5 Weather

<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://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/ilu1.webp" width="100px">
              </div>
            </div>

          </div>
        </div>

      </div>
    </div>

  </div>
</section>

How to use?

  1. Download MDB 5 - free UI KIT

  2. Choose your favourite customized component and click on the image

  3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More examples

Bootstrap Weather App: Bootstrap 5 Weather

Bootstrap Current Weather animated App: Bootstrap 5 Weather

Bootstrap Weather card: Bootstrap 5 Weather

Bootstrap Current Weather info card: Bootstrap 5 Weather

Bootstrap Weather report: Bootstrap 5 Weather

Bootstrap Weather card UI: Bootstrap 5 Weather

More extended Bootstrap documentation

About

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

https://mdbootstrap.com/docs/standard/extended/weather/

weatherbootstrapbootstrap5cardsresponsivebootstrap-responsivebootstrap-templatebootstrap-uiweather-template

License:Other

Languages

Language:JavaScript 44.9%Language:SCSS 44.1%Language:HTML 11.0%