Added in v5.2

Footer

Documentation and examples for a powerful and responsive Boosted’s footer. It includes support for branding, navigation and more.

How it worksLink to this section: How it works

Our footer is basically a <footer> tag with .footer and .navbar classes. It comes with 5 ready-to-use fully responsive bars which should be arranged vertically in the following order:

Title with content bar
Follow us bar
Navigation bar
Service bar
Terms and conditions mandatory bar

You can choose to display each part or not, except the last one which is mandatory. No matter how many parts you use, they should follow the order listed above.

If these available parts don’t meet your specific needs, feel free to develop your own custom part accordingly to Orange Design System.

This footer component is based on the navbar component. Don’t forget to import the corresponding SCSS file if you’re using Lean Sass imports.

ExampleLink to this section: Example

The <h2></h2> and <h3></h3> tags used in the following sections are informative, you need to adapt those to your website’s title hierarchy.

The footer bars are independent from each other. Just add a separator between each bar of the final footer.

<div class="border-bottom border-1 border-dark"></div>

Title with content barLink to this section: Title with content bar

This footer bar is a container with a .footer-title-content class. This container includes a title and a .row container in which to add your content. See below an example with a mail form content.

<footer class="footer navbar" data-bs-theme="dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-title-content">
    <h3 class="footer-heading">Sign up to our mailing list</h3>
    <div class="row">
      <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
        <label for="inputEmail" class="visually-hidden">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email">
        <button type="submit" class="btn btn-outline-secondary text-nowrap">Sign up</button>
      </form>
    </div>
  </div>
</footer>

html

Follow us barLink to this section: Follow us bar

This footer bar is a container with .footer-social class into which a list of social media icons can be added.

Other social media are available. See the full list of our Social buttons.

<footer class="footer navbar" data-bs-theme="dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-social">
    <h3 class="footer-heading me-md-3">Follow us</h3>
    <ul class="navbar-nav gap-2 flex-row align-self-start">
      <li><a href="#" class="btn btn-icon btn-social btn-twitter"><span class="visually-hidden">Twitter</span></a></li>
      <li><a href="#" class="btn btn-icon btn-social btn-facebook"><span class="visually-hidden">Facebook</span></a></li>
      <li><a href="#" class="btn btn-icon btn-social btn-instagram"><span class="visually-hidden">Instagram</span></a></li>
      <li><a href="#" class="btn btn-icon btn-social btn-whatsapp"><span class="visually-hidden">WhatsApp</span></a></li>
      <li><a href="#" class="btn btn-icon btn-social btn-linkedin"><span class="visually-hidden">LinkedIn</span></a></li>
      <li><a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a></li>
    </ul>
  </div>
</footer>

html

This footer bar is a container with a .footer-nav class meant to contain navigation links organized in columns. You can add several categories in one footer-column by adding either accordion items or their content directly inside the columns. You can also adjust every column size depending on the breakpoint. Try to have equal sized columns height and it will wrap nicely.

This container needs our Collapse JavaScript plugin to work properly.

Depending on the screen size and for accessibility concerns, you need to write each category title in 2 different ways:

<h3 class="accordion-header footer-heading" id="headingOne2">

  <!-- For small screens -->
  <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
    Category
  </button>

   <!-- For large screens -->
  <span class="d-none d-md-flex">Category</span>
</h3>

<footer class="footer navbar" data-bs-theme="dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-nav">
    <nav class="accordion" id="accordion2" aria-label="Sitemap footer 2">
      <div class="row">
        <div class="footer-column col-md-3">
          <h3 class="accordion-header footer-heading" id="headingOne2">
            <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
              Category
            </button>
            <span class="d-none d-md-flex">Category</span>
          </h3>
          <div id="collapseOne2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2">
            <ul class="navbar-nav">
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
            </ul>
          </div>
        </div>
        <div class="footer-column col-md-3">
          <h3 class="accordion-header footer-heading" id="headingTwo2">
            <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="true" aria-controls="collapseTwo2">
              Category
            </button>
            <span class="d-none d-md-flex">Category</span>
          </h3>
          <div id="collapseTwo2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2">
            <ul class="navbar-nav">
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
            </ul>
          </div>
        </div>
        <div class="footer-column col-md-3">
          <h3 class="accordion-header footer-heading" id="headingThree2">
            <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree2" aria-expanded="true" aria-controls="collapseThree2">
              Category
            </button>
            <span class="d-none d-md-flex">Category</span>
          </h3>
          <div id="collapseThree2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2">
            <ul class="navbar-nav">
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
            </ul>
          </div>
        </div>
        <div class="footer-column col-md-3">
          <h3 class="accordion-header footer-heading" id="headingFour2">
            <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour2" aria-expanded="true" aria-controls="collapseFour2">
              Category
            </button>
            <span class="d-none d-md-flex">Category</span>
          </h3>
          <div id="collapseFour2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2">
            <ul class="navbar-nav">
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </div>
</footer>

html

Service barLink to this section: Service bar

The footer is a container with a .footer-service class. Its purpose is to display customer services links.

<footer class="footer navbar" data-bs-theme="dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-service">
    <ul class="navbar-nav gap-3 gap-md-4">
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#location-pin-compass"/></svg><span>Store locator</span></a></li>
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#mobile-network-coverage"/></svg><span>Coverage checker</span></a></li>
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#live-chat"/></svg><span>Contact us</span></a></li>
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#child-protection"/></svg><span>Child protection</span></a></li>
    </ul>
  </div>
</footer>

html

Mandatory terms and conditions barLink to this section: Mandatory terms and conditions bar

The footer is a container with a .footer-terms class. This footer bar is mandatory in every footer and should come as the last bar of the footer.

<footer class="footer navbar" data-bs-theme="dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-terms">
    <ul class="navbar-nav gap-md-3">
      <li class="fw-bold">© Orange 2025</li>
      <li><a class="nav-link" href="#">Terms and conditions</a></li>
      <li><a class="nav-link" href="#">Privacy</a></li>
      <li><a class="nav-link" href="#">Accessibility statement</a></li>
      <li><a class="nav-link" href="#">Cookie policy</a></li>
    </ul>
  </div>
</footer>

html

AccessibilityLink to this section: Accessibility

Add the .active class on .nav-link to indicate the current page.

Please note that you should also add the aria-current attribute on the active .nav-link.

<footer class="footer navbar" data-bs-theme="dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-service">
    <ul class="navbar-nav gap-3 gap-md-4">
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#location-pin-compass"/></svg><span>Store locator</span></a></li>
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#mobile-network-coverage"/></svg><span>Coverage checker</span></a></li>
      <li><a class="nav-link gap-1 active" href="#" aria-current="page"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#live-chat"/></svg><span>Contact us</span></a></li>
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#child-protection"/></svg><span>Child protection</span></a></li>
    </ul>
  </div>
</footer>

html

<footer class="footer navbar" data-bs-theme="dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-terms">
    <ul class="navbar-nav gap-md-3">
      <li class="fw-bold">© Orange 2025</li>
      <li><a class="nav-link" href="#">Terms and conditions</a></li>
      <li><a class="nav-link" href="#">Privacy</a></li>
      <li><a class="nav-link active" href="#" aria-current="page">Accessibility statement</a></li>
      <li><a class="nav-link" href="#">Cookie policy</a></li>
    </ul>
  </div>
</footer>

html

CSSLink to this section: CSS

VariablesLink to this section: Variables

As part of Boosted’s evolving CSS variables approach, footers use local CSS variables on every footer part for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

scss/_footer.scss

--#{$prefix}footer-gap: 0;
--#{$prefix}footer-padding-top: 0;
--#{$prefix}footer-padding-bottom: 0;
--#{$prefix}footer-color: #{$footer-color};
--#{$prefix}footer-title-margin-bottom: 0;
--#{$prefix}footer-title-font-size: #{$footer-font-size-md};
--#{$prefix}footer-title-font-weight: #{$footer-title-font-weight};
--#{$prefix}footer-title-line-height: #{$footer-line-height-md};
--#{$prefix}footer-title-letter-spacing: #{$footer-letter-spacing};

Each bar redefines its own CSS variables.

Some additional CSS variables are also present on .footer-title-content:

scss/_footer.scss

--#{$prefix}footer-padding-top: #{$footer-title-content-padding-top};
--#{$prefix}footer-padding-bottom: #{$footer-title-content-padding-bottom};
--#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom};

and from the medium breakpoint:

scss/_footer.scss

--#{$prefix}footer-padding-bottom: #{$footer-title-content-padding-bottom-md};

Some additional CSS variables are also present on .footer-social:

scss/_footer.scss

--#{$prefix}footer-padding-top: #{$footer-social-padding-top};
--#{$prefix}footer-padding-bottom: #{$footer-social-padding-bottom};
--#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom};
--#{$prefix}footer-title-font-size: #{$footer-font-size-sm};
--#{$prefix}footer-title-line-height: #{$footer-line-height-sm};

and from the medium breakpoint:

scss/_footer.scss

--#{$prefix}footer-padding-top: #{$footer-social-padding-top-md};
--#{$prefix}footer-title-margin-bottom: #{$footer-social-title-margin-bottom-md};
--#{$prefix}footer-title-font-size: #{$footer-font-size-md};
--#{$prefix}footer-title-line-height: #{$footer-line-height-md};

Some additional CSS variables are also present on .footer-nav:

scss/_footer.scss

--#{$prefix}footer-gap: #{$footer-gap-xl};

from the medium breakpoint:

scss/_footer.scss

--#{$prefix}footer-gap: #{$footer-gap};
--#{$prefix}footer-padding-top: #{$footer-nav-padding-top};
--#{$prefix}footer-padding-bottom: #{$footer-nav-list-padding-bottom-md};
--#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom-md};

and from the large breakpoint:

scss/_footer.scss

--#{$prefix}footer-padding-bottom: #{$footer-nav-list-padding-bottom-lg};

Some additional CSS variables are also present on .footer-service:

scss/_footer.scss

--#{$prefix}footer-padding-top: #{subtract($footer-service-padding-y, .0625rem)};
--#{$prefix}footer-padding-bottom: #{$footer-service-padding-y};

and from the medium breakpoint:

scss/_footer.scss

--#{$prefix}footer-padding-top: #{add($footer-service-padding-y-md, .0625rem)};
--#{$prefix}footer-padding-bottom: #{$footer-service-padding-y-md};

Some additional CSS variables are also present on .footer-terms:

scss/_footer.scss

--#{$prefix}footer-padding-top: #{$footer-terms-padding-top};
--#{$prefix}footer-padding-bottom: #{$footer-terms-padding-bottom};
--#{$prefix}footer-gap: #{$footer-gap-xl};

and from the medium breakpoint:

scss/_footer.scss

--#{$prefix}footer-padding-top: #{$footer-terms-padding-y-md};
--#{$prefix}footer-padding-bottom: #{$footer-terms-padding-y-md};

Sass VariablesLink to this section: Sass Variables

For more details, please have a look at the exhaustive list of available variables:

scss/_variables.scss

$footer-color:                            var(--#{$prefix}body-color);
$footer-font-size-sm:                     $font-size-sm;
$footer-line-height-sm:                   $line-height-sm;
$footer-font-size-md:                     $font-size-base;
$footer-line-height-md:                   $line-height-base;
$footer-title-font-weight:                $font-weight-bold;
$footer-letter-spacing:                   $letter-spacing-base;
$footer-accordion-line-height:            $spacer * 1.45;
$footer-accordion-active-color:           var(--#{$prefix}primary);
$footer-accordion-btn-hover-bg:           null;
// fusv-disable
$footer-nav-link-font-weight:             $font-weight-bold; // Deprecated in v5.3.3
// fusv-enable

$footer-title-content-padding-top:        $spacer * 1.25;
$footer-title-content-padding-bottom:     $spacer * 1.45;
$footer-title-content-padding-bottom-md:  $spacer * 1.95;
$footer-title-margin-bottom:              $spacer * .85;

$footer-social-padding-top:               $spacer * .85;
$footer-social-padding-top-md:            $spacer * 1.5;
$footer-social-padding-bottom:            $spacer * 1.45;
$footer-social-title-margin-bottom-md:    $spacer * .1;

$footer-title-margin-bottom-md:           $spacer * 1.05;
$footer-nav-padding-top:                  $spacer * 1.55;
$footer-nav-list-padding-top:             $spacer * .85;
$footer-nav-list-padding-top-md:          $spacer * .05;
$footer-nav-list-padding-bottom:          $spacer * 1.3;
$footer-nav-list-padding-bottom-md:       $spacer * 1.75;
$footer-nav-list-padding-bottom-lg:       $spacer * 2;

$footer-service-padding-y:                $spacer;
$footer-service-padding-y-md:             $spacer * 1.2;
$footer-service-link-padding-top:         $spacer * .1;

$footer-terms-padding-top:                $spacer * .85;
$footer-terms-padding-bottom:             $spacer * 1.35;
$footer-terms-padding-y-md:               $spacer * 1.1;

$footer-gap:                              $spacer * .75;
$footer-gap-xl:                           $spacer * 1.7;

Footer

On this page

How it worksLink to this section: How it works

ExampleLink to this section: Example

Footer barsLink to this section: Footer bars

Title with content barLink to this section: Title with content bar

Follow us barLink to this section: Follow us bar

Navigation barLink to this section: Navigation bar

Service barLink to this section: Service bar

Mandatory terms and conditions barLink to this section: Mandatory terms and conditions bar

AccessibilityLink to this section: Accessibility

CSSLink to this section: CSS

VariablesLink to this section: Variables

Sass VariablesLink to this section: Sass Variables

Footer

On this page On this page

How it worksLink to this section: How it works

ExampleLink to this section: Example

Footer barsLink to this section: Footer bars

Title with content barLink to this section: Title with content bar

Follow us barLink to this section: Follow us bar

Navigation barLink to this section: Navigation bar

Service barLink to this section: Service bar

Mandatory terms and conditions barLink to this section: Mandatory terms and conditions bar

AccessibilityLink to this section: Accessibility

CSSLink to this section: CSS

VariablesLink to this section: Variables

Sass VariablesLink to this section: Sass Variables

On this page