Material Design System PRO by Creative Tim

Footer 1

Preview
Code

Copy

<!-- -------- START FOOTER 1 w/ COMPANY DESCRIPTION AND 4 COLS ------- -->
<footer class="footer py-9">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 mb-5 mb-lg-0">
        <h6 class="text-uppercase mb-2">Material UI Design</h6>
        <p class="mb-4 pb-2">
            The next generation of design systems.
        </p>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-3">
          <span class="text-lg fab fa-facebook"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-3">
          <span class="text-lg fab fa-twitter"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-3">
          <span class="text-lg fab fa-instagram"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-3">
          <span class="text-lg fab fa-pinterest"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-3">
          <span class="text-lg fab fa-github"></span>
        </a>
      </div>
      <div class="col-md-2 col-6 ms-lg-auto mb-md-0 mb-4">
        <h6 class="text-sm">Company</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              About Us
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Careers
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Press
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Blog
            </a>
          </li>
        </ul>
      </div>

      <div class="col-md-2 col-6 mb-md-0 mb-4">
        <h6 class="text-sm">Pages</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Login
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Register
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Add list
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Contact
            </a>
          </li>
        </ul>
      </div>

      <div class="col-md-2 col-6 mb-md-0 mb-4">
        <h6 class="text-sm">Legal</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Terms
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              About Us
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Team
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Privacy
            </a>
          </li>
        </ul>
      </div>

      <div class="col-md-2 col-6 mb-md-0 mb-4">
        <h6 class="text-sm">Resources</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Blog
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Service
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Product
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank">
              Pricing
            </a>
          </li>
        </ul>
      </div>
    </div>
    <hr class="horizontal dark mt-lg-5 mt-4 mb-sm-4 mb-1">
    <div class="row">
      <div class="col-8 mx-lg-auto text-lg-center">
        <p class="text-sm text-secondary">
          Copyright © <script>document.write(new Date().getFullYear())</script> Material Design by Creative Tim.
        </p>
      </div>
    </div>
  </div>
</footer>
<!-- -------- END FOOTER 1 w/ COMPANY DESCRIPTION AND 4 COLS ------- -->

Footer 2

Preview
Code

Copy

<!-- ---- START FOOTER 2 dark w/ bg image 5 cols & subscribe area & social---- -->
<footer class="footer py-5 bg-gradient-dark">
  <div class="container position-relative mt-5">
    <div class="row ">
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-white text-sm">Company</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Marketing
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Analytics
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Commerce
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Insights
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-white text-sm">Support</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Pricing
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Docs
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Guides
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              API Suport
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-white text-sm">Pages</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/presentation" target="_blank">
              About
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/blog" target="_blank">
              Blog
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Jobs
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Press
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/affiliates/new" target="_blank">
              Affiliates
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-white text-sm">Legal</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Claim
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Privacy
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Terms
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-8 ms-md-auto">
        <h6 class="text-white text-md-end text-sm mb-0">Language & Currency</h6>
        <ul class="nav flex-column">
          <li class="nav-item mt-3">
            <select class="form-control" name="language-button" id="language-button" placeholder="Language">
              <option value="Choice 1" selected>English</option>
              <option value="Choice 2">Chinese</option>
              <option value="Choice 3">French</option>
              <option value="Choice 4">Romanian</option>
            </select>
          </li>
          <li class="nav-item mt-3">
            <select class="form-control" name="currency-button" id="currency-button" placeholder="Currency">
              <option value="Choice 1" selected>USD</option>
              <option value="Choice 2">EUR</option>
              <option value="Choice 3">JPY</option>
              <option value="Choice 4">GBP</option>
              <option value="Choice 5">CAD</option>
              <option value="Choice 6">RON</option>
            </select>
          </li>
        </ul>
      </div>
    </div>
    <hr class="horizontal light mb-4 mt-lg-4">
    <div class="row">
      <div class="col-lg-6 text-start">
        <h6 class="text-white">Subscribe to our newsletters</h6>
        <p class="text-white opacity-8 mb-lg-0 mb-3">The latest news, articles and resources sent to your inbox weekely.</p>
      </div>
      <div class="col-lg-4 ms-auto text-end my-auto">
        <div class="row">
          <div class="col-md-8 col-7">
            <div class="input-group input-group-outline">
              <label class="form-label">E-mail</label>
              <input class="form-control" type="email">
            </div>
          </div>
          <div class="col-md-4 col-5 text-start ps-0">
            <button type="button" class="btn bg-gradient-info mb-0">Subscribe</button>
          </div>
        </div>
      </div>
    </div>
    <hr class="horizontal light my-4">
      <div class="row">
        <div class="col-lg-6 col-md-6 my-auto">
          <p class="text-white mb-0 opacity-8">
            Copyright © <script>document.write(new Date().getFullYear())</script> Material Design by Creative Tim.
          </p>
        </div>
        <div class="col-lg-4 col-md-6  ms-auto text-end">
          <button type="button" class="btn btn-icon-only btn-link text-white mb-0 opacity-6">
            <i class="fab fa-facebook text-lg"></i>
          </button>
          <button type="button" class="btn btn-icon-only btn-link text-white mb-0 opacity-6">
            <i class="fab fa-twitter text-lg"></i>
          </button>
          <button type="button" class="btn btn-icon-only btn-link text-white mb-0 opacity-6">
            <i class="fab fa-dribbble text-lg"></i>
          </button>
          <button type="button" class="btn btn-icon-only btn-link text-white mb-0 opacity-6">
            <i class="fab fa-github text-lg"></i>
          </button>
        </div>
      </div>
  </div>
</footer>
<!-- ---- END FOOTER 2 dark w/ bg image 5 cols & subscribe area & social---- -->

Footer 3

Preview
Code

Copy

<!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
<footer class="footer py-10">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mb-4 mx-auto text-center">
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
          Company
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
          About Us
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
          Team
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
          Products
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
          Blog
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
          Pricing
        </a>
      </div>
      <div class="col-lg-8 mx-auto text-center mb-4 mt-2">
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
          <span class="text-lg fab fa-dribbble"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
          <span class="text-lg fab fa-twitter"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
          <span class="text-lg fab fa-instagram"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
          <span class="text-lg fab fa-pinterest"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
          <span class="text-lg fab fa-github"></span>
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-8 mx-auto text-center mt-1">
        <p class="mb-0 text-secondary">
          Copyright © <script>document.write(new Date().getFullYear())</script> Material Design by Creative Tim.
        </p>
      </div>
    </div>
  </div>
</footer>
<!-- -------- END FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->

Footer 4

Preview
Code

Copy

<!-- ---- START FOOTER 4 dark w/ 2 cols ---- -->
<footer class="footer py-4 my-11 bg-gradient-dark">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-3 text-start my-auto">
        <p class="mb-0 text-white text-sm">
          Copyright © <script>document.write(new Date().getFullYear())</script> Material Design by Creative Tim.
        </p>
      </div>
      <div class="col-lg-5 col-md-8 ms-auto text-end">
        <ul class="nav flex-row ms-n3 align-items-center mt-4 mt-sm-0">
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/presentation" target="_blank">
              About
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/blog" target="_blank">
              Blog
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Services
            </a>
          </li>

          <li class="nav-item ms-auto">
            <button type="button" class="btn bg-gradient-info mb-0 ms-3 ms-sm-0 mt-3 mt-sm-0">Get in Touch</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>
<!-- ---- END FOOTER 4 dark w/ 2 cols ---- -->

Footer 5

Preview
Code

Copy

<!-- -------- START FOOTER 5 w/ DARK BACKGROUND ------- -->
<footer class="footer py-5 my-9 bg-gradient-dark position-relative overflow-hidden">
  <img src="../../assets/img/shapes/pattern-lines.svg" alt="pattern-lines" class="position-absolute start-0 top-0 w-100 opacity-6">
  <div class="container position-relative z-index-1">
    <div class="row">
      <div class="col-lg-4 me-auto mb-lg-0 mb-4 text-lg-start text-center">
        <h6 class="text-white font-weight-bolder text-uppercase mb-lg-4 mb-3">Material UI Design</h6>
        <ul class="nav flex-row ms-n3 align-items-center mb-4 mt-sm-0">
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/presentation" target="_blank">
              About
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/blog" target="_blank">
              Blog
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank">
              Services
            </a>
          </li>
        </ul>
        <p class="text-sm text-white opacity-8 mb-0">
          Copyright © <script>document.write(new Date().getFullYear())</script> Material Design by Creative Tim.
        </p>
      </div>
      <div class="col-lg-6 ms-auto text-lg-end text-center">
        <p class="mb-5 text-lg text-white font-weight-bold">
          The reward for getting on the stage is fame. The price of fame is you can’t get off the stage.
        </p>
        <a href="javascript:;" target="_blank" class="text-white me-xl-4 me-4 opacity-8">
          <span class="fab fa-dribbble"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-white me-xl-4 me-4 opacity-8">
          <span class="fab fa-twitter"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-white me-xl-4 me-4 opacity-8">
          <span class="fab fa-pinterest"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-white opacity-8">
          <span class="fab fa-github"></span>
        </a>
      </div>
    </div>
  </div>
</footer>
<!-- -------- END FOOTER 5 w/ DARK BACKGROUND ------- -->

Footer 6

Preview
Code

Copy

<!-- ---- START FOOTER 6 dark w/ 3 cols and subscribe area ---- -->
<footer class="footer py-10">
  <div class="container">
    <div class="row ">
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-sm">Company</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Marketing
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Analytics
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Insights
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-sm">Support</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Pricing
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Docs
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Guides
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-sm">Company</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com/presentation" target="_blank">
              About Us
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com/blog" target="_blank">
              Blog
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Jobs
            </a>
          </li>
        </ul>
      </div>

      <div class="col-lg-4 col-md-5 col-sm-6 col-12 ms-auto mt-4 mt-sm-0">
        <h6>Subscribe</h6>
        <p class="text-sm">Get access to subscriber exclusive deals and be the first who gets informed about fresh sales.</p>
        <div class="row">
          <div class="col-md-8 col-7">
          <div class="input-group input-group-outline">
            <label class="form-label">Enter your e-mail</label>
            <input class="form-control" type="text">
          </div>
          </div>
          <div class="col-md-4 col-5 ps-0">
            <button type="button" class="btn bg-gradient-info">Subscribe</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
<!-- ---- END FOOTER 6 dark w/ 3 cols and subscribe area ---- -->

Footer 7

Preview
Code

Copy

<!-- -------- START FOOTER 7 w/ DARK BACKGROUND AND 3 COLUMNS ------- -->
<footer class="footer py-5 my-10 bg-gradient-dark position-relative overflow-hidden">
  <img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute start-0 top-0 w-100 opacity-1">
  <div class="container position-relative">
    <div class="row">
      <div class="col-lg-4 me-auto my-auto text-lg-start text-center">
        <h6 class="text-white font-weight-bolder text-uppercase mb-2">Material UI Design</h6>
        <p class="text-white">
          Copyright © <script>document.write(new Date().getFullYear())</script> Material Design by Creative Tim.
        </p>
      </div>
      <div class="col-lg-2 col-sm-4 col-12 ms-md-auto text-lg-start text-center mb-sm-0 mb-4">
        <div>
          <h6 class="text-white text-sm mb-1">Company</h6>
          <ul class="flex-column ms-lg-n3 nav">
            <li class="nav-item">
              <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank">
                About Us
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank">
                Careers
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank">
                Press
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="col-lg-2 col-sm-4 col-12 text-lg-start text-center mb-sm-0 mb-4">
        <div>
          <h6 class="text-white text-sm mb-1">Pages</h6>
          <ul class="flex-column ms-lg-n3 nav">
            <li class="nav-item">
              <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank">
                Login
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank">
                Register
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank">
                About
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="col-lg-2 col-sm-4 col-12 text-lg-start text-center mb-sm-0 mb-4">
        <div>
          <h6 class="text-white text-sm mb-1">Products</h6>
          <ul class="flex-column ms-lg-n3 nav">
            <li class="nav-item">
              <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank">
                Free
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank">
                PRO
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank">
                Latest
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>
<!-- -------- END FOOTER 7 w/ DARK BACKGROUND AND 3 COLUMNS ------- -->

Footer 8

Preview
Code

Copy

<!-- ---- START FOOTER 8 dark w/ 3 cols and subscribe area ---- -->
<footer class="footer py-10">
  <div class="container position-relative">
    <div class="row ">
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-sm">Company</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Marketing
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Analytics
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Insights
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-sm">Support</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Pricing
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Docs
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
              Guides
            </a>
          </li>
        </ul>
      </div>

      <div class="col-lg-8 col-md-5 col-sm-6 col-12 mt-4 mt-sm-0">
        <h6>Subscribe</h6>
        <p class="text-sm">Get access to subscriber exclusive deals and be the first who gets informed about fresh sales.</p>
        <div class="row">
          <div class="col-md-5 col-7">
            <div class="form-group">
              <div class="input-group input-group-outline">
                <label class="form-label">Enter your e-mail</label>
                <input class="form-control" type="text">
              </div>
            </div>
          </div>
          <div class="col-md-4 col-5 ps-0">
            <button type="button" class="btn bg-gradient-info">Subscribe</button>
          </div>
        </div>
      </div>
    </div>
    <hr class="horizontal dark">
    <ul class="nav flex-row justify-content-center">
      <li class="nav-item">
        <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
          Terms & conditions
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
          Privacy policy
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank">
          Legal notice
        </a>
      </li>
    </ul>
  </div>
</footer>
<!-- ---- START FOOTER 8 dark w/ 3 cols and subscribe area ---- -->

Footer 9

Preview
Code

Copy

<!-- -------- START FOOTER 5 w/ DARK BACKGROUND ------- -->
<div class="position-relative mt-8">
  <div class="container">
    <div class="card bg-gradient-dark z-index-3">
      <div class="card-body">
        <div class="row">
          <div class="col-md-8 mx-auto text-center my-auto">
            <h3 class="text-white">Be the first who see the news</h3>
            <p class="text-white opacity-8 px-5">
              Your company may not be in the software business,
              but eventually, a software company will be in your business.
            </p>
            <div class="row">
              <div class="col-sm-5 ms-auto">
                <div class="input-group input-group-outline">
                  <label class="form-label">Email Here...</label>
                  <input type="text" class="form-control">
                </div>
              </div>
              <div class="col-sm-3 ps-0 me-auto text-start">
                <button type="button" class="btn bg-white w-100 position-relative z-index-2">Subscribe</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<footer class="footer pb-5 pt-8 bg-light mt-n5 position-relative">
  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <h6 class="font-weight-bolder mb-lg-4 mb-3">Material Design</h6>
      </div>
      <div class="col-lg-6 text-center">
        <ul class="nav flex-row align-items-center mb-5 mt-sm-0 justify-content-center">
          <li class="nav-item">
            <a class="nav-link" href="https://www.creative-tim.com" target="_blank">
              Home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.creative-tim.com/presentation" target="_blank">
              About
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="https://www.creative-tim.com/blog" target="_blank">
              Blog
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.creative-tim.com" target="_blank">
              Services
            </a>
          </li>
        </ul>
        <p class="mb-0">
          Copyright © <script>
            document.write(new Date().getFullYear())
          </script> Material Design by Creative Tim.
        </p>
      </div>
      <div class="col-lg-3 text-end">
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
          <span class="fab fa-dribbble text-lg"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
          <span class="fab fa-twitter text-lg"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
          <span class="fab fa-pinterest text-lg"></span>
        </a>
        <a href="javascript:;" target="_blank" class="text-secondary">
          <span class="fab fa-github text-lg"></span>
        </a>
      </div>
    </div>
  </div>
</footer>
<!-- -------- END FOOTER 5 w/ DARK BACKGROUND ------- -->

Footer 10

Preview
Code

Copy

<!-- ---- START FOOTER 10 white w/ bg image 5 cols & subscribe area & social---- -->
<footer class="footer py-8 bg-gray-200">
  <div class="container position-relative z-index-1 mt-5">
    <div class="row ">
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-sm">Company</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Marketing
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Analytics
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Commerce
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Insights
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-sm">Support</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Pricing
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Docs
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Guides
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              API Suport
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-sm">Pages</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com/presentation" target="_blank">
              About
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com/blog" target="_blank">
              Blog
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Jobs
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Press
            </a>
          </li>

        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-4">
        <h6 class="text-sm">Legal</h6>
        <ul class="flex-column ms-n3 nav">
          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com/affiliates/new" target="_blank">
              Affiliates
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Claim
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Privacy
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank">
              Terms
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-8 ms-auto">
        <h6 class="text-end text-sm">Language & Currency</h6>
        <ul class="nav flex-column">
          <li class="nav-item mt-3">
            <select class="form-control" name="language-button" id="language-button" placeholder="Language">
              <option value="Choice 1" selected>English</option>
              <option value="Choice 2">Chinese</option>
              <option value="Choice 3">French</option>
              <option value="Choice 4">Romanian</option>
            </select>
          </li>
          <li class="nav-item mt-3">
            <select class="form-control" name="currency-button" id="currency-button" placeholder="Currency">
              <option value="Choice 1" selected>USD</option>
              <option value="Choice 2">EUR</option>
              <option value="Choice 3">JPY</option>
              <option value="Choice 4">GBP</option>
              <option value="Choice 5">CAD</option>
              <option value="Choice 6">RON</option>
            </select>
          </li>
        </ul>
      </div>
    </div>
    <hr class="horizontal dark my-4">
      <div class="row">
        <div class="col-lg-6 col-md-6 my-auto">
          <p class="mb-0 opacity-8">
            Copyright © <script>document.write(new Date().getFullYear())</script> Material Design by Creative Tim.
          </p>
        </div>
        <div class="col-lg-4 col-md-6  ms-auto text-end">
          <button type="button" class="btn btn-icon-only btn-link mb-0 opacity-6">
            <i class="fab fa-facebook text-lg text-secondary"></i>
          </button>
          <button type="button" class="btn btn-icon-only btn-link mb-0 opacity-6">
            <i class="fab fa-twitter text-lg text-secondary"></i>
          </button>
          <button type="button" class="btn btn-icon-only btn-link mb-0 opacity-6">
            <i class="fab fa-dribbble text-lg text-secondary"></i>
          </button>
          <button type="button" class="btn btn-icon-only btn-link mb-0 opacity-6">
            <i class="fab fa-github text-lg text-secondary"></i>
          </button>
        </div>
      </div>
  </div>
</footer>
<!-- ---- END FOOTER 10 white w/ bg image 5 cols & subscribe area & social---- -->

Page Sections

Navigation

Input Areas

Attention Catchers

Elements

Page Sections

Navigation

Input Areas

Attention Catchers

Elements

Getting Started

Foundation

Components

Plugins

Utility Classes

Getting Started

Foundation

Components

Plugins

Utility Classes

Footers