Footer Components

Description

Footer navbar component supports custom content such as: dropdown menus, multi level menus, language selects, forms fields, date pickers etc.

HTML Markup

This section contains HTML Markup to create fixed footer. This markup define where to add css classes to make footer fixed.

  • Line no 2: Contain the .navbar to support custom contents.
  • Line no 4, 5, 6, 10, 16: Contain the custom content such as: dropdown menus, multi level menus, language selects, forms fields, date pickers etc.
    
      <!-- START FOOTER CUSTOM-->
      <footer class="navbar fixed-bottom content container-fluid footer footer-light footer-shadow">
        <ul class="nav navbar-nav ml-1">
          <li class="nav-item"><a href="#" class="nav-link text-muted">Terms of use</a></li>
          <li class="nav-item"><a href="#" class="nav-link text-muted">Privacy Policy</a></li>
          <li class="dropdown dropdown-language nav-item"><a  href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link"><i class="flag-icon flag-icon-gb"></i><span class="selected-language">English</span><i class="caret"></i></a>
            <div aria-labelledby="dropdown-flag" class="dropdown-menu dropdown-menu-right"><a href="#" class="dropdown-item"><i class="flag-icon flag-icon-gb"></i> English</a><a href="#" class="dropdown-item"><i class="flag-icon flag-icon-es"></i> Spanish</a><a href="#" class="dropdown-item"><i class="flag-icon flag-icon-pt"></i> Portuguese</a><a href="#" class="dropdown-item"><i class="flag-icon flag-icon-fr"></i> French</a></div>
          </li>
        </ul>
        <form class="form-inline float-right">
          <div class="input-group mb-0 mt-0"><span class="input-group-prepand">
              <button type="button" class="btn btn-secondary"><i class="ft-monitor"></i></button></span>
            <input type="text" placeholder="Quick search..." aria-label="Amount" class="form-control"><span class="input-group-append">
              <button type="button" class="btn btn-outline-success">Go!</button></span>
          </div>
          <button type="button" class="btn btn-outline-primary"><i class="fa fa-heart-o"></i> Logut</button>
        </form>
      </footer>
      <!-- END FOOTER CUSTOM-->
    
    

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now