<footer class="footer">
    <div class="container-fluid p-0">
      <div class="bg-light p-4 pb-0">
        <div class="row g-4 justify-content-between">

          <div class="col-md-5 col-lg-4">

            <a class="me-0 fs-4 text-decoration-none fw-semibold brand text-primary" href="#">
              webui
            </a>
            <p class="text-muted">15205 North Kierland Blvd. Suite 100. Scottsdale, Arizona, USA</p>
          </div>

          <div class="col-md-7 col-lg-4">
            <div class="row g-4 g-lg-5">
              <!-- Link block -->
              <div class="col-6">
                <h5 class="mb-2 mb-md-3">Website</h5>
                <ul class="nav flex-column">
                  <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                </ul>
              </div>

              <!-- Link block -->
              <div class="col-6">
                <h5 class="mb-2 mb-md-3">Application</h5>
                <ul class="nav flex-column">
                  <li class="nav-item"><a class="nav-link pt-0" href="#">Sign up</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Sign in</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Privacy Policy</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Terms</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- Divider -->
        <hr class="mt-4 mb-0">

        <!-- Bottom footer -->
        <div class="container-fluid py-3 px-0">
          <div class="d-md-flex justify-content-between align-items-center text-center text-md-left text-black-50">
            <!-- copyright text -->
            <div class="text-primary-hover copyright-message"> Copyrights ©2023 webui. Powered by <a href="https://www.webui.io/">webui</a>. </div>
            <!-- copyright links-->
            <div class="mt-3 mt-md-0">
              <ul class="nav text-primary-hover social-link justify-content-center justify-content-md-end">
                <li class="nav-item">
                  <a class="nav-link text-reset" href="#"><i class="bi bi-facebook"></i></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-reset" href="#"><i class="bi bi-instagram"></i></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-reset" href="#"><i class="bi bi-twitter"></i></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-reset" href="#"><i class="bi bi-linkedin"></i></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>

  
                
            

                
                    
    @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

    :root {
      --bs-green: #059700;
      --bs-black: #000000;
      --bs-primary: var(--bs-green);
      --bs-secondary: var(--bs-black);
    }

    body {
      font-size: 0.9rem;
    }

    .footer .flex-column .nav-link {
      padding: 2px 0;
      color: #666;
    }

    .footer .flex-column .nav-link:hover {
      color: var(--bs-primary);
    }

    .footer .copyright-message {
      font-size: 0.85rem;
    }

    .footer .text-primary {
      color: var(--bs-primary) !important;
    }

    .footer .bg-primary {
      background-color: var(--bs-primary) !important;
    }

    .footer .btn-primary {
      background-color: var(--bs-primary) !important;
      border-color: var(--bs-primary) !important;
    }

    .footer .social-link a,
    .footer .copyright-message a {
      color: var(--bs-primary) !important;
    }
                  
            

                
                    

  <footer class="footer">
    <div class="bg-primary py-5">
      <div class="container">
        <div class="row mx-auto">
          <div class="col-lg-6 mx-auto text-center">
            <!-- Logo -->
            <div class="mb-4">
              <a href="#" class="brand text-white text-decoration-none">
                webui
              </a>
            </div>
            <!-- Links -->
            <ul class="nav justify-content-between text-primary-hover mt-5 mt-md-0">
              <li class="nav-item"><a class="nav-link p-2" href="#">About</a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">Terms</a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">Privacy</a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">Career</a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">Contact us</a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">Cookies</a></li>
            </ul>
            <!-- Social media button -->
            <ul class="list-inline mt-4 mb-0">
              <li class="list-inline-item">
                <a class="btn btn-light btn-sm shadow px-2 text-facebook" href="#">
                  <i class="bi bi-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn btn-light btn-sm shadow px-2 text-instagram" href="#">
                  <i class="bi bi-instagram"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn btn-light btn-sm shadow px-2 text-twitter" href="#">
                  <i class="bi bi-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn btn-light btn-sm shadow px-2 text-linkedin" href="#">
                  <i class="bi bi-linkedin"></i>
                </a>
              </li>
            </ul>
            <!-- copyright text -->
            <div class="text-white-50 mt-4"> <small>Copyrights ©2023 webui. Powered by <a href="https://www.webui.io/" class="text-white-50">webui</a>.</small> </div>
          </div>
        </div>

      </div>
    </div>
  </footer>

  
                
            

                
                    
    @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

    :root {
      --bs-green: #0052af;
      --bs-black: #000000;
      --bs-primary: var(--bs-green);
      --bs-secondary: var(--bs-black);
      --bs-text-primary: var(--bs-green);
      --bs-text-secondary: var(--bs-black);
    }

    body {
      font-size: .9rem;
    }

    .footer .brand {
      font-size: 1.3rem;
      font-weight: 600;
    }

    .footer .nav-link {
      color: #ffffff;
    }

    .footer .nav-link:hover {
      color: var(--bs-secondary);
    }

    .footer .text-primary {
      color: var(--bs-text-primary) !important;
    }

    .footer .bg-primary {
      background-color: var(--bs-primary) !important;
    }