Vuexy bootstrap Dashboard by Pixinvent

Footer

Template footer options with responsive and all the options.

Here’s an example of basic footer.

Preview
HTML

<footer class="content-footer footer bg-light">
  <div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 py-4">
    <div>
      <a href="https://pixinvent.com/vuexy-bootstrap-html-admin-template/" target="_blank" class="footer-text fw-bold">Vuexy</a> ©
    </div>
    <div>
      <a href="https://themeforest.net/licenses/standard" class="footer-link me-6" target="_blank">License</a>
      <a href="javascript:void(0)" class="footer-link me-6">Help</a>
      <a href="javascript:void(0)" class="footer-link me-6">Contact</a>
      <a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
    </div>
  </div>
</footer>

Tip: Add .layout-footer-fixed class to <html> tag for Fixed footer.

Remove any background color like .bg-{color} class for transparent footer.

Preview
HTML

<footer class="content-footer footer">
  <div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 py-4">
    <div>
      <a href="https://pixinvent.com/vuexy-bootstrap-html-admin-template/" target="_blank" class="footer-text fw-bold">Vuexy</a> ©
    </div>
    <div>
      <a href="https://themeforest.net/licenses/standard" class="footer-link me-6" target="_blank">License</a>
      <a href="javascript:void(0)" class="footer-link me-6">Help</a>
      <a href="javascript:void(0)" class="footer-link me-6">Contact</a>
      <a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
    </div>
  </div>
</footer>

Here’s an example of footer with UI Elements.

Preview
HTML

<footer class="content-footer footer bg-footer-theme">
  <div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 py-4">
    <div>
      <a href="https://pixinvent.com/vuexy-bootstrap-html-admin-template/" target="_blank" class="footer-text fw-bold">Vuexy</a> ©
    </div>
    <div>
      <div class="form-check footer-link me-4">
        <input class="form-check-input" type="checkbox" value="" id="customCheck2" checked />
        <label class="form-check-label" for="customCheck2">
          Show
        </label>
      </div>
      <div class="dropdown dropup footer-link me-4">
        <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Currency
        </button>
        <div class="dropdown-menu dropdown-menu-end">
          <a class="dropdown-item" href="javascript:void(0);"><i class='icon-base ti tabler-currency-dollar'></i> USD</a>
          <a class="dropdown-item" href="javascript:void(0);"><i class='icon-base ti tabler-currency-euro'></i> Euro</a>
          <a class="dropdown-item" href="javascript:void(0);"><i class='icon-base ti tabler-currency-pound'></i> Pound</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0);"><i class='icon-base ti tabler-currency-bitcoin'></i> Bitcoin</a>
        </div>
      </div>
      <a href="javascript:void(0)" class="btn btn-sm btn-outline-danger"><i class='icon-base ti tabler-logout me-1'></i> Logout</a>
    </div>
  </div>
</footer>

Color Schemes

Theming the footer has never been easier thanks to the combination of theming classes and background-color utilities. Then, customize with .bg-* utilities.

Preview
HTML

<footer class="content-footer footer bg-{COLOR}">
  <div
    class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 py-4">
    <div>
      <a href="https://pixinvent.com/vuexy-bootstrap-html-admin-template/" target="_blank" class="footer-text fw-bold">Vuexy</a> ©
    </div>
    <div>
      <a href="https://themeforest.net/licenses/standard" class="footer-link me-6" target="_blank">License</a>      <a href="javascript:void(0)" class="footer-link me-6">Help</a>
      <a href="javascript:void(0)" class="footer-link me-6">Contact</a>
      <a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
    </div>
  </div>
</footer>

Class	Value
`class="footer bg-{value}"`	primary \| secondary \| success \| danger \| warning \| info \| light \| dark \| white \| body-tertiary

Here’s an example of footer theme. Use .bg-footer-theme class to change footer according to theme.

Preview
HTML

<footer class="content-footer footer bg-footer-theme">
  <div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 py-4">
    <div>
      <a href="https://pixinvent.com/vuexy-bootstrap-html-admin-template/" target="_blank" class="footer-text fw-bold">Vuexy</a> ©
    </div>
    <div>
      <a href="https://themeforest.net/licenses/standard" class="footer-link me-6" target="_blank">License</a>
      <a href="javascript:void(0)" class="footer-link me-6">Help</a>
      <a href="javascript:void(0)" class="footer-link me-6">Contact</a>
      <a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
    </div>
  </div>
</footer>

Footer using SCSS variables to change the color of the footer.

Find footer's SCSS variables:

$footer-bg: var(--#{$prefix}paper-bg) !default;
$footer-color: var(--#{$prefix}body-color) !default;
$footer-border-width: 0 !default;
$footer-border-color: var(--#{$prefix}border-color) !default;
$footer-link-color: var(--#{$prefix}primary) !default;
$footer-link-hover-color: rgba(var(--#{$prefix}primary-rgb), .8) !default;
$footer-link-disabled-color: color-mix(in sRGB, var(--#{$prefix}base-color) 40%, var(--#{$prefix}paper-bg)) !default;
$footer-link-active-color: var(--#{$prefix}primary) !default;
$footer-brand-color: $footer-link-active-color !default;
$footer-brand-hover-color: color-mix(in sRGB, #{$footer-link-active-color} #{$bg-label-tint-amount}, var(--#{$prefix}paper-bg)) !default;
$footer-box-shadow: var(--#{$prefix}box-shadow-xl) !default;

Footer SCSS variables are used for CSS variables. Footer CSS variables can be updated as per themes.

Find footer's CSS variables

--#{$prefix}footer-color: #{$footer-color};
--#{$prefix}footer-bg: #{$footer-bg};
--#{$prefix}footer-border-width: #{$footer-border-width};
--#{$prefix}footer-border-color: #{$footer-border-color};
--#{$prefix}footer-link-color: #{$footer-link-color};
--#{$prefix}footer-link-hover-color: #{$footer-link-hover-color};
--#{$prefix}footer-link-disabled-color: #{$footer-link-disabled-color};
--#{$prefix}footer-link-active-color: #{$footer-link-active-color};
--#{$prefix}footer-brand-color: #{$footer-brand-color};
--#{$prefix}footer-brand-hover-color: #{$footer-brand-hover-color};
--#{$prefix}footer-box-shadow: #{$footer-box-shadow};

Advanced, responsive footer with more options and advanced stylings.

Preview
HTML

<footer class="content-footer footer bg-footer-theme">
  <div class="container-fluid pt-12 pb-6">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-3 mb-6 mb-sm-0">
        <h4 class="fw-bold mb-4"><a href="https://pixinvent.com/vuexy-bootstrap-html-admin-template/" target="_blank" class="footer-text">Vuexy </a></h4>
        <span>Get ready for better world</span>
        <div class="social-icon my-4">
          <a href="javascript:void(0)" class="me-2 btn btn-icon btn-sm btn-facebook"><i class='icon-base ti tabler-brand-facebook icon-20px'></i></a>
          <a href="javascript:void(0)" class="me-2 btn btn-icon btn-sm btn-twitter"><i class='icon-base ti tabler-brand-twitter icon-20px'></i></a>
          <a href="javascript:void(0)" class="me-2 btn btn-icon btn-sm btn-linkedin"><i class='icon-base ti tabler-brand-linkedin icon-20px'></i></a>
          <a href="javascript:void(0)" class="btn btn-icon btn-sm btn-github"><i class='icon-base ti tabler-brand-github icon-20px'></i></a>
        </div>
        <p class="pt-6">
          <script>
          document.write(new Date().getFullYear())
          </script> © Pixinvent
        </p>
      </div>
      <div class="col-12 col-sm-6 col-md-3 mb-6 mb-md-0">
        <h5>Company</h5>
        <ul class="list-unstyled">
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">About</a></li>
          <li>
            <a href="javascript:void(0)" class="footer-link d-block pb-2">Career <span class="badge bg-label-primary text-capitalize">We're hiring</span></a>
          </li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Blog</a></li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Customers</a></li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Hire us</a></li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">FAQs</a></li>
        </ul>
      </div>
      <div class="col-12 col-sm-6 col-md-3 mb-6 mb-sm-0">
        <h5>Products</h5>
        <ul class="list-unstyled">
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Admin Template</a></li>
          <li>
            <a href="javascript:void(0)" class="footer-link d-block pb-2">UI Kit</a>
          </li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Styleguide</a></li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">API</a></li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Documentation</a></li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Changelog</a></li>
        </ul>
      </div>
      <div class="col-12 col-sm-6 col-md-3">
        <h5>Features</h5>
        <ul class="list-unstyled">
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Affiliate Program</a></li>
          <li>
            <a href="javascript:void(0)" class="footer-link d-block pb-2">Integration</a>
          </li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a></li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Special Offers</a></li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Page Builder</a></li>
          <li><a href="javascript:void(0)" class="footer-link d-block pb-2">Plans & Pricing</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Footer

Basic footer

Transparent footer

Footer with Element

Color Schemes

Footer Theme

SCSS Variables

CSS Variables

Advanced Footer