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-->